<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>qdabc.cn</title> <style type="text/css"> *{margin: 0; padding: 0;} .front-face{ display: block; width: 100px; height: 100px; position: relative; border: 1px solid #ccc; margin: 20px auto; line-height: 100px; text-align: center; } .front{ position: absolute; z-index: 1; display: block; width: 100px; height: 100px; background: blue; color: #000; opacity: 1; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear; -ms-transition: all .4s linear; transition: all .4s linear; } .back{ position: absolute; z-index: 1; display: block; width: 100px; height: 100px; background: orange; color: red; opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transition: all .4s linear; -moz-transition: all .4s linear; -o-transition: all .4s linear; -ms-transition: all .4s linear; transition: all .4s linear; } /*.front-face:hover .front{ opacity: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .front-face:hover .back{ opacity: 1.0; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } */ </style> <script type="text/javascript"> window.onload = function (){ var oBox = document.getElementById('box'); var aA = oBox.children; var bSign = true; oBox.onclick = function (){ if(bSign){ aA[0].style.opacity = 0; aA[1].style.opacity = 1; toDeg(aA[0], 180); toDeg(aA[1], 0); }else{ aA[0].style.opacity = 1; aA[1].style.opacity = 0; toDeg(aA[0], 0); toDeg(aA[1], 180); } bSign = !bSign; }; function toDeg(obj,n){ obj.style.WebkitTransform = 'rotateY('+n+'deg)'; obj.style.MozTransform = 'rotateY('+n+'deg)'; obj.style.OTransform = 'rotateY('+n+'deg)'; obj.style.MsTransform = 'rotateY('+n+'deg)'; obj.style.transform = 'rotateY('+n+'deg)'; } }; </script> </head> <body> <div class="box"> <a href="javascript:;" class="front-face" id="box"> <div class="front">111</div> <div class="back">222</div> </a> </div> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » css3实现图片翻转效果