图片触及翻转效果 css3

实现图片由左向右飞入回到最初设定位置，鼠标浮上去旋转显示另一张图片效果；

html:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html"; charset="utf-8" />
        <title>图片翻转CSS3</title>
    
    </head>
    <body>
        <div class="page">
            <ul id="box">
                <li>
                    <div class="div1">
                        <img src="Images/m.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div2">
                        <img src="Images/w.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div3">
                        <img src="Images/k.png" alt=""/></div>
                </li>
                <li>
                    <span></span><div class="div4">
                        <img src="Images/t.png" alt=""/></div>
                </li>
            </ul>
        </div>
       
    </body>
</html>

2. css部分：

@-webkit-keyframes "mixovMove"
        {
            0%
            {
                -webkit-animation-timing-function:ease;
                left:-300px;
                -webkit-transform:rotateY(0deg) scale(0);
                opacity:0;
            }
            50%
            {
                left:700px;
                -webkit-transform:rotateY(0deg) scale(0.4);
                opacity:1;
            }
            100%
            {
                -webkit-transform:rotateY(360deg) scale(1);
            }
        }
        html
        {
            height:100%; margin:0 auto; position:relative;
        }
        body
        {
            background:url(Images/miaov.jpg) no-repeat center 0; margin:0 auto; overflow:hidden; padding-top:128px;
        }
        ul
        {
            margin:0; padding:0;
        }
        li
        {
            list-style:none;
        }
        .page
        {
            height:615px; background:url(Images/1-bg.png) no-repeat;position:relative;overflow:hidden; -webkit-transform-style:preserve-3d;-webkit-perspective:100;  margin:0 auto; width:1024px; /*子元素获得透视效果perspective 属性只影响 3D 转换元素。*/
        }
        #box
        {
            width:760px; height:170px; position:absolute; top:150px; left:132px;
        }
        li
        {
            float:left; margin:0 10px; width:170px; height:170px; position:relative;
        }
        #box div
        {
            width:170px; height:170px; -webkit-transform:translateZ(-100px) rotateY(0deg); -webkit-transition:300ms -webkit-transform linear;
        }
        #box span
        {
            position:absolute; left:0; top:0; width:170px; height:170px;
        }
        #box img
        {
            display:none; -webkit-transform:rotateY(180deg);
        }
        .div1
        {
            background:url(Images/c.png) no-repeat;
        }
        .div2
        {
            background:url(Images/s-1.png) no-repeat;
        }
        .div3
        {
            background:url(Images/s-2.png) no-repeat;
        }
        .div4
        {
            background:url(Images/3.png) no-repeat;
        }

3.js部分：

<script>
            window.onload = function () {
                var oBox = document.getElementById("box");
                var aLi = oBox.getElementsByTagName("li");
                var aImg = oBox.getElementsByTagName("img");
                var aDiv = oBox.getElementsByTagName("div");
                for (var i = 0; i < aLi.length; i++) { 
                    aLi[i].left = aLi[i].offsetLeft;
                    aLi[i].style.left = "-200px";
                    aLi[i].style.top = "0";
                    aLi[i].index = i;
                    aLi[i].oTimer = null;
                    aLi[i].style["WebkitTransform"] = "rotateY(0deg) scale(0)";
                }
                for (var i = 0; i < aLi.length; i++) 
                {
                    aLi[i].style.position = "absolute";
                    move(aLi[i], 300 * i); 
                    aLi[i].onmouseover = function () {
                        var oBj = this;
                       // debugger;
                        clearTimeout(oBj.oTimer);
                        oBj.oTimer = setTimeout(function () {
                            aImg[oBj.index].style.display = "block";
                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(180deg)";  //后执行
                        }, 290);
                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)"; //先执行
                    };
                    aLi[i].onmouseout = function ()
                    {
                        var oBj = this;
                        clearTimeout(oBj.oTimer);
                        oBj.oTimer = setTimeout(function () {
                            aImg[oBj.index].style.display = "none";
                            aDiv[oBj.index].style["WebkitTransform"] = "rotateY(0deg)";
                        }, 295);
                        aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)";
                    }

                }
            };

            function move(obj, iTime)
            {
                var oTimer = null;
                oTimer = setTimeout(function () {
                    obj.style.left = obj.left + "px";
                    obj.style["WebkitTransform"] = "rotateY(0deg) scale(1)";
                    obj.style["WebkitAnimationName"] = "mixovMove";
                    obj.style["WebkitAnimationDuration"] = "2s";

                },iTime)
            }
        </script>

来源：http://www.cnblogs.com/aimyfly/p/3152316.html

标签

css3旋转

webkit

css

ali