- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></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>
来源: http://www.qdfuns.com/article/42521/167199dd33833b1a1911f14261cb2313.html