3d旋转

transform-origin:允许你改变被转换元素的位置。

3d旋转

 

 

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

 

你可能感兴趣的:(3D)