3d旋转

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>