JS+CSS Stereo Rotation

Pure CSS3 making Coca-Cola cans This effect is believed that many people have seen, pure CSS implementation of three-dimensional Coca-Cola cans, looks quite tall on ~

So today I this little rookie try to study, a little regret, did not see the source code, or directly F12 it, seemingly realized is not so difficult

The approximate schematic is this:

Of course the code is implemented differently;

The pictures are as follows:

The left image is a matte layer, in which the middle transparent part can display the background map, and a translucent shadow is added to make the effect more realistic, equal to the yellow slider,

The picture on the right is the background, the equivalent of a gray background, in this code implementation, the instance has a total of more than 50 p tags to splice, the background image is set to fixed, so when scrolling ,

The background image does not move, and it appears that the entire scrolling process is smoother.

Since yesterday set an automatic rotation instance, so in want to can do an automatic rotation, looks like 360 degrees rotation example, the answer is yes, but the test effect is not good, because only the packaging part can have 360 degree picture,

The pot itself is not;

Click to view Demo

The general idea is the same as the transition banner idea, the picture is divided into n small (here I omitted the calculation, so directly 1px a picture), each picture placed in a Div, through the backgrounc-position control position, When the first sheet is out of the screen, it is appended to the end of the entire element, which creates an infinite scrolling effect.

See the code specifically:

1 <Divclass= "Wrap">     3   <ulclass= "Rotate"ID= "Element"></ul>4   <Divclass= "Shadow"></Div>5 </Div>

UL for the packaging picture layer, Li elements the same background, different positions, shadow in the Mask picture, only the middle position is PNG transparent visible, the other location is set to white.

CSS main control picture location

1 *{margin:0px;padding:0px}2 . Wrap{width:240px;Height:440px;position:relative;margin:100px Auto;Overflow:Hidden}3 . Shadow{position:Absolute;width:100%;Height:100%;background:URL (http://a1.qpic.cn/psb?/v10af8bz2egagl/w62ffjkhtn6ruo3kfns2vhhfu7lzcr0pf.ow4l91yyg!/b/dbobaaaaaaaa& Bo=0gbqaqaaaaadb6e!&rf=viewer_4) Center Center no-repeat;}4 . Rotate{width:190px;Height:100%;position:Absolute;Top:0px;Margin-left:25px; Left:}5 img{Display:Block;margin:0px Auto;Margin-top:-80px}6 Li{List-style-type:None;float: Left;width:1px;Height:100%;}

Generate Li elements via JQ and animate

1<script>2$(function(){3     varwidth=537; 4      for(i=0;i<width;i+=1){     5$ ("ul"). Append (' <li style= ' Background:url (http://a1.qpic.cn/psb?/V10AF8bZ2eGAgL/  Tcmgrnzlj7iukruhvlrkceng2k1gclsoerz*lnnbkew!/b/dbobaaaaaaaa&bo=gqiyaqaaaaafbyy!&rf=viewer_4)-' + i + ' px 62px no-repeat "></li>")     6     }; 7     functionAdd () {8$ ("ul"). Animate ({left: "-=1px"},10,function(){9$ ("ul"). CSS ({"Left": "0px"}). Find ("Li:first"). AppendTo ($ ("ul")))   Ten         })     One     } ASetInterval (add,10) - }) -</script>

If you have any questions or errors or better solutions, please contact me.

Another own new set up a QQ group: 85530789, Welcome to like-minded friends with a lot of communication technology

JS+CSS Stereo Rotation