transform-origin:允许你改变被转换元素的位置。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #box { width:300px;margin:60px auto 0;position:relative; z-index:2; height:300px; -webkit-transform-style:preserve-3d; -webkit-perspective:1000; } .content { position:relative; -webkit-transform-style:preserve-3d;-webkit-transform:rotateY(0deg); -webkit-transition:2ms all linear; /*3d图过渡的速度，不应太大；否则不能实现无缝对接*/ } img { position:absolute; left:0; top:0; display:block; width:300px;height:300px; } .img1 { -webkit-transform:translateZ(150px); background:#ff6a00; } .img2 { -webkit-transform:translateZ(-150px) rotateY(-90deg); -webkit-transform-origin:left;background:#00ffff; } .img3 { -webkit-transform:translateZ(-150px) rotateY(90deg); -webkit-transform-origin:right;background:#4800ff; } .img4 { -webkit-transform:translateZ(-150px) rotateY(180deg);background:#808080; } p { background:url(Images/shadow.png) no-repeat; width:515px; height:278px; position:absolute; bottom:-50px; left:50%; z-index:1; opacity:0.8; margin:0 0 0 -250px; } </style> <script> window.onload = function () { var oBox = document.getElementById("box"); var oCon = oBox.getElementsByTagName("div")[0]; var oTimer = null; var iDeg = 0; var iSpeed = 1; oTimer = setInterval(function () { if (iDeg == 360) { iDeg = 0; } iDeg += iSpeed; oCon.style["WebkitTransform"] = "rotateY(" + iDeg + "deg)"; }, 20); oCon.onmouseover = function () { clearInterval(oTimer); } oCon.onmouseout = function () { oTimer = setInterval(function () { if (iDeg == 360) { iDeg = 0; } iDeg += iSpeed; oCon.style["WebkitTransform"] = "rotateY(" + iDeg + "deg)"; }, 20); } } </script> </head> <body> <div id="box"> <div class="content"> <img src="Images/1.jpg" alt="" class="img1" /> <img src="Images/2.jpg" alt="" class="img2" /> <img src="Images/3.jpg" alt="" class="img3" /> <img src="Images/4.jpg" alt="" class="img4" /> </div> </div> <p></p> </body> </html>