All geek questions in one place

CSS 3D animation?

I am trying to create an animation where the image will be wrapped around a cylinder or bottle.

I use CSS3 and it works to a certain extent. But I can’t find a way to bring the bottom half of the cylinder! the top of this is what I need, and the bottom half should be the same as the top bit.

I created jsFiddle, but the page is not like jsFiddle, because it does not show 3D. Please get a code from here and try it on an empty HTML-page locally, so you know what I mean: http://jsfiddle.net/crf121359/Kk7AB/

I just need to make the bottom half (bottom circle) exactly the same as the top half.

I played with X / Y values ​​and nothing works!

<!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, 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 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.

+4
source share
2 answers

The problem was resolved by changing this line of code:

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

ok I played a little with CSS in this fiddle that @ j08691 gave. and I came up with this.

http://jsfiddle.net/QGEgv/

the only thing I really changed is rotateX(10deg) in -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 to make it seem more "3D" when you tilt it 10 degrees, they bring the bottom to the user, giving the impression that he is closer to them. which in turn made the bottom bigger on the screen.

+1
source

Source: https://habr.com/ru/post/1497435/

More articles:


All Articles