3D Rotation of images

This function is simple, that is, a large screen, scroll to play pictures on the left and right.

The key point is how to implement smooth scrolling, including animation effects and 3D effects.

<Style> IMG {position: absolute; top: 200; left: 400px;/* border: 1px solid #333; */padding: 2px 5px 2px 5px;-WebKit-transition: returns all 0.7 s;-WebKit-transform-origin: 50% 50% 600px;/* Background: rgba (, 0, 0 ,. 3); */width: 100px; Height: 100px; Z-index:-1 ;}. button {position: absolute; top: 253px; width: 20px; Height: 60px; Background: rgba (0, 0, 0 ,. 3); padding-top: 40px; Vertical-align: middle; text-align: center; Z-index: 2 ;}. button: hover {cursor: pointer ;}. left {left: 130px ;}. right {left: 870px ;}. layerhidden {position: absolute; top: 220px; width: 160px; Height: 200px; Background: white; Vertical-align: middle; text-align: center; Z-index: 1 ;}. layerleft {left: 0px ;}. layerright {left: 850px ;}</style> <SCRIPT> var IMGs; var leftstart = 0; var showlength = 7; var step = 0; function Init () {IMGs = document. getelementsbytagname ("IMG"); reshowimgs () ;}function turnleft () {If (leftstart> 0) {leftstart --; Step ++; reshowimgs ();} else {alert ("no photo on the left") ;}} function turnright () {If (leftstart + showlength           <Div id =" "left_button" class = "button left" onclick = "turnleft () "Style =" "> </div> <Div id =" right_button "class =" button right "onclick =" turnright () "Style =" ">></div> <Div class =" layerhidden layerleft "> </div> <Div class =" layerhidden layerright "> </div> <SCRIPT> init (); </SCRIPT>

3D Rotation of images