实现图片由左向右飞入回到最初设定位置 ，鼠标浮上去旋转显示另一张图片效果；
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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/110093.html原文链接：https://javaforall.net
