Simon Presto
Reputation: 167
CSS 3D animation?
I am trying to create an animation where an image will be wrapped around a cylinder or a bottle.
I am using CSS3 and it works to certain extent. But I cannot find a way to bring the bottom half of the cylinder! the top part of it is what I need and the bottom half needs to be same as the top bit.
I've made a jsFiddle BUT the page is nothing like it on the jsFiddle as it is not showing the 3D. Please get the code from here and try it on a blank HTML page locally so you know what I am talking about:http://jsfiddle.net/crf121359/Kk7AB/
I just need to make the bottom half (the bottom circle) to be exactly same as the top half.
I did play around with the X/Y values and nothing seems to work!
<!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>
Thanks in advance.
Upvotes: 4
Views: 1353
Answers (2)
Malachi
Reputation: 3221
ok I did a little bit of playing with the CSS in that fiddle that @j08691 gave. and I came up with this.
the only thing that I really changed was the rotateX(10deg) in both -moz-transform and -webkit-transform- to 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);}
what happens is that to make it seem more "3D" when you tilted it by 10 degrees they brought the bottom out towards the user making it seem like it was closer to them. which in turn made the bottom bigger on the screen.
Upvotes: 1
Simon Presto
Reputation: 167
The problem was solved by changing this line of code:
#container {
text-align:center;
margin:0 auto;
top:450px;
width:550px;
-moz-perspective: 2000px;
-webkit-perspective: 2000}
Upvotes: 0