css3 - CSS 3D animation? -
i trying create animation image wrapped around cylinder or bottle.
i using css3 , works extent. cannot find way bring bottom half of cylinder! top part of need , bottom half needs same top bit.
i've made jsfiddle page nothing on jsfiddle not showing 3d. please code here , try on blank html page locally know talking about:http://jsfiddle.net/crf121359/kk7ab/
i need make bottom half (the bottom circle) same top half.
i did play around x/y values , nothing seems 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 image around 3d revolving cylinder using html , css3 3d, tutorial" /> <meta name="keywords" content="panorama how wrap image around cylinder css3 3d tutorial wrapping picture around cylinder " /> <meta name="copyright" content="(c) 2011 - 2012" /> <meta name="author" content="preston e hall, director@baloziproductions.com" /> <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 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 792px 320px, try 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 { { -moz-transform: rotatey(0)} { -moz-transform: rotatey(-360deg)}} @-webkit-keyframes spin { { -webkit-transform: rotatey(0)} { -webkit-transform: rotatey(-360deg)}} </style> </head> <body> <div id="container"> <h1>image wrapped around 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.
ok did little bit of playing css in fiddle @j08691 gave. , came this.
the thing changed rotatex(10deg) in both -moz-transform , -webkit-transform- 0deg
#frame {width: 33px; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* translate must 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 make seem more "3d" when tilted 10 degrees brought bottom out towards user making seem closer them. in turn made bottom bigger on screen.
Comments
Post a Comment