3D-анимация CSS?

Я пытаюсь создать анимацию, где изображение будет обернуто вокруг цилиндра или бутылки.3D-анимация CSS?

Я использую CSS3, и это работает в определенной степени. Но я не могу найти способ довести нижнюю половину цилиндра! верхняя часть этого - то, что мне нужно, и нижняя половина должна быть такой же, как верхний бит.

Я сделал jsFiddle, но страница ничего не похожа на jsFiddle, поскольку она не показывает 3D. Получите код отсюда и попробуйте его на пустой HTML-странице локально, чтобы вы знали, о чем я говорю: http://jsfiddle.net/crf121359/Kk7AB/

Мне просто нужно сделать нижнюю половину (нижний круг) точно такой же, как верхняя половина ,

Я играл со значениями X/Y и ничего не работает!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="wrap an image around a 3D revolving cylinder using only HTML and CSS3 3D, tutorial" /> 
<meta name="keywords"  content="panorama how to wrap image around cylinder CSS3 3D tutorial wrapping a picture around a cylinder " /> 
<meta name="copyright"  content="(c) 2011 - 2012" /> 
<meta name="author"  content="Preston E Hall, [email protected]" /> 

<title>Image Wrapped Around Spinning Cylinder Using Pure CSS3 3D</title> 

<style type="text/css" media="screen"> 

body {background:#000; 
    color:rgb(236,132,57)} 

h1 {font:small-caps 167% Arial,Helvetica,sans-serif} 

#container { 
    text-align:center; 
    margin:0 auto; 
    top:450px; 
    width:550px; 
    -moz-perspective: 900px;  
    -webkit-perspective: 900} 

#container:hover * { 
    -moz-animation-play-state:paused; 
    -webkit-animation-play-state:paused} 

#frame {width: 33px; 
    -moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; /* translate must be last */ 
    -moz-transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px); 
    -webkit-transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);} 

.strip {-moz-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-animation: spin 15s infinite linear; 
    -webkit-animation: spin 15s infinite linear} 

.strip div { 
    position: absolute; 
    background: url(http://thumbp2-ir2.thumb.mail.yahoo.com/tn?sid=24769798665600007&mid=AKoo5C4AABDQUg0%2FRwAAAHNDk2E&midoffset=2_0_0_1_7182251&partid=1.2&f=1726&fid=Inbox&w=614&h=503); /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */ 
    background-repeat:no-repeat; 
    border: solid rgb(145,87,0); 
    border-width: thin 10px; 
    height:320px; 
    width:33px; 
    opacity: 100; 
} 

.strip .a {background-position: 0 0; 
     -moz-transform: rotateY(0deg) translateZ(124px); 
    -webkit-transform: rotateY(0deg) translateZ(124px)} 

.strip .b {background-position: 759px 0; 
     -moz-transform: rotateY(0deg) translateZ(124px); 
    -webkit-transform: rotateY(0deg) translateZ(124px)} 

.strip .c {background-position: 726px 0; 
     -moz-transform: rotateY(30deg) translateZ(124px); 
    -webkit-transform: rotateY(30deg) translateZ(124px)} 

.strip .d {background-position: 693px 0; 
     -moz-transform: rotateY(45deg) translateZ(124px); 
    -webkit-transform: rotateY(45deg) translateZ(124px)}  

.strip .e {background-position: 660px 0; 
     -moz-transform: rotateY(60deg) translateZ(124px); 
    -webkit-transform: rotateY(60deg) translateZ(124px)}  

.strip .f {background-position: 627px 0; 
     -moz-transform: rotateY(75deg) translateZ(124px); 
    -webkit-transform: rotateY(75deg) translateZ(124px)} 

.strip .g {background-position: 594px 0; 
     -moz-transform: rotateY(90deg) translateZ(124px); 
    -webkit-transform: rotateY(90deg) translateZ(124px)} 

.strip .h {background-position: 561px 0; 
     -moz-transform: rotateY(105deg) translateZ(124px); 
    -webkit-transform: rotateY(105deg) translateZ(124px)} 

.strip .i {background-position: 528px 0; 
     -moz-transform: rotateY(120deg) translateZ(124px); 
    -webkit-transform: rotateY(120deg) translateZ(124px)} 

.strip .j {background-position: 495px 0; 
     -moz-transform: rotateY(135deg) translateZ(124px); 
    -webkit-transform: rotateY(135deg) translateZ(124px)} 

.strip .k {background-position: 462px 0; 
     -moz-transform: rotateY(150deg) translateZ(124px); 
    -webkit-transform: rotateY(150deg) translateZ(124px)} 

.strip .l {background-position: 429px 0; 
     -moz-transform: rotateY(165deg) translateZ(124px); 
    -webkit-transform: rotateY(165deg) translateZ(124px)} 

.strip .m {background-position: 396px 0; 
     -moz-transform: rotateY(180deg) translateZ(124px); 
    -webkit-transform: rotateY(180deg) translateZ(124px)}  

.strip .n {background-position: 363px 0; 
     -moz-transform: rotateY(195deg) translateZ(124px); 
    -webkit-transform: rotateY(195deg) translateZ(124px)} 

.strip .o {background-position: 330px 0; 
     -moz-transform: rotateY(210deg) translateZ(124px); 
    -webkit-transform: rotateY(210deg) translateZ(124px)} 

.strip .p {background-position: 297px 0; 
     -moz-transform: rotateY(225deg) translateZ(124px); 
    -webkit-transform: rotateY(225deg) translateZ(124px)} 

.strip .q {background-position: 264px 0; 
     -moz-transform: rotateY(240deg) translateZ(124px); 
    -webkit-transform: rotateY(240deg) translateZ(124px)} 

.strip .r {background-position: 231px 0; 
     -moz-transform: rotateY(255deg) translateZ(124px); 
    -webkit-transform: rotateY(255deg) translateZ(124px)} 

.strip .s {background-position: 198px 0; 
     -moz-transform: rotateY(270deg) translateZ(124px); 
    -webkit-transform: rotateY(270deg) translateZ(124px)} 

.strip .t {background-position: 165px 0; 
     -moz-transform: rotateY(285deg) translateZ(124px); 
    -webkit-transform: rotateY(285deg) translateZ(124px)} 

.strip .u {background-position: 132px 0; 
     -moz-transform: rotateY(300deg) translateZ(124px); 
    -webkit-transform: rotateY(300deg) translateZ(124px)} 

.strip .v {background-position: 99px 0; 
     -moz-transform: rotateY(315deg) translateZ(124px); 
    -webkit-transform: rotateY(315deg) translateZ(124px)} 

.strip .w {background-position: 66px 0; 
     -moz-transform: rotateY(330deg) translateZ(124px); 
    -webkit-transform: rotateY(330deg) translateZ(124px)} 

.strip .x {background-position: 33px 0; 
     -moz-transform: rotateY(345deg) translateZ(124px); 
    -webkit-transform: rotateY(345deg) translateZ(124px)} 

@-moz-keyframes spin { 
    from { -moz-transform: rotateY(0)} 
    to { -moz-transform: rotateY(-360deg)}} 

@-webkit-keyframes spin { 
    from { -webkit-transform: rotateY(0)} 
    to { -webkit-transform: rotateY(-360deg)}} 

</style> 

</head> 
<body> 

<div id="container"> 

<h1>Image Wrapped Around A Spinning strip</h1> 

<div id="frame"> 
<div class="strip"> 

<div class="a"></div> 
<div class="b"></div> 
<div class="c"></div> 
<div class="d"></div> 
<div class="e"></div> 
<div class="f"></div> 
<div class="g"></div> 
<div class="h"></div> 
<div class="i"></div> 
<div class="j"></div> 
<div class="k"></div> 
<div class="l"></div> 
<div class="m"></div> 
<div class="n"></div> 
<div class="o"></div> 
<div class="p"></div> 
<div class="q"></div> 
<div class="r"></div> 
<div class="s"></div> 
<div class="t"></div> 
<div class="u"></div> 
<div class="v"></div> 
<div class="w"></div> 
<div class="d"></div> 

</div> 
</div> 
</div> 
</body> 
</html>

Заранее спасибо.

источник

2013-08-16 Simon Presto

Похоже, что в основном работать, если у вас есть хорошая ссылка на фоновое изображение и удалить границу: http://jsfiddle.net/j08691/Kk7AB/1/ – j08691

@ j08691, так как я сказал, что код не работает jsfiddle правильно. используйте код локально, чтобы вы знали, как он выглядит, или он должен выглядеть! что показано на jsfiddle, отмечая, как это должно быть! и не имеет ничего общего с качеством изображения или ссылкой на изображение! –

Я использую Chrome, мне пришлось бросать 'repeat-x' там на' .strip div' '' background-repeat'. просто чтобы изображение отображалось на всех панелях. не знаете, что видите? – Malachi

Проблема была решена путем изменения этой строки кода:

#container { 
    text-align:center; 
    margin:0 auto; 
    top:450px; 
    width:550px; 
    -moz-perspective: 2000px;  
    -webkit-perspective: 2000}

источник

2013-08-16 14:00:57

это сработало, но почему это сработало? – Malachi

@ Malachi, я понятия не имею, почему это сработало, но когда я изменил перспективные значения, это сработало. поэтому я ответил на свой вопрос. надеюсь, что этот код будет полезен кому-то другому. –

что перспектива просмотра, возможно? – Malachi

хорошо я сделал немного играть с CSS в том, что скрипку @ j08691 дал. и я придумал это.

http://jsfiddle.net/QGEgv/

единственное, что я действительно изменился был rotateX(10deg) в обоих -moz-transform и -webkit-transform- к 0deg

#frame {width: 33px; 
-moz-transform-style: preserve-3d; 
-webkit-transform-style: preserve-3d; /* translate must be last */ 
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px); 
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(125px,70px,50px);}

, что происходит в том, что сделать это кажется более «3D», когда вы наклонить его 10 градусов они принесли нижнюю часть к пользователю, создавая впечатление, что он ближе к ним. которые в свою очередь сделали дно больше на экране.

источник

2013-08-16 14:01:16 Malachi

проголосовали за понимание и усилие. –

ответ

Смежные вопросы