图片翻转特效 

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>无标题文档</title>
  6 <style>
  7 .wrapper
  8 {
  9    perspective:1000px;
 10    -webkit-perspective:1000px;
 11    -moz-perspective:1000px;
 12    -o-perspective:1000px;
 13    -ms-perspective:1000px;
 14    margin:200px;
 15    border:1px solid #06C;
 16 }
 17 .wrapper.hover .filter,
 18 .wrapper:hover .filter{
 19     transform-style:preserve-3d;
 20     transform:rotateY(180deg);
 21 }
 22 .wrapper .filter{
 23     transition:1s;
 24     transform-style:preserve-3d;
 25     position:relative;
 26 }
 27 .wrapper,
 28 .wrapper .filter .face,
 29 .wrapper .filter .back{
 30     width:300px;
 31     height:450px;
 32 }
 33 .wrapper .filter .face,
 34 .wrapper .filter .back{
 35     backface-visibility:hidden;    
 36     transform-style:preserve-3d;
 37     position:absolute;
 38     top:0;
 39     left:0;
 40     color:#F00;
 41 }
 42 .wrapper .filter .face{
 43   background:#093;
 44 }
 45 .wrapper .filter .back{
 46   background:#C6C;
 47   transform:rotateY(180deg);
 48 }
 49 
 50 /*IE内核*/
 51 .IEwp{
 52     perspective:1000px;
 53    -webkit-perspective:1000px;
 54    -moz-perspective:1000px;
 55    -o-perspective:1000px;
 56    -ms-perspective:1000px;
 57    transform-style:preserve-3d;
 58    -webkit-transform-style:preserve-3d;
 59    -moz-transform-style:preserve-3d;
 60    -o-transform-style:preserve-3d;
 61    -ms-transform-style:preserve-3d;
 62    margin:200px;
 63    border:1px solid #06C;
 64 }
 65 .IEwp:hover .filter .face{
 66     transform:rotateY(180deg);
 67 }
 68 .IEwp:hover .filter .back{
 69     transform:rotateY(0deg);
 70 }
 71 .IEwp,
 72 .IEwp .filter .face,
 73 .IEwp .filter .back{
 74     width:300px;
 75     height:450px;
 76 }
 77 .IEwp .filter{
 78     transition:1s;
 79     transform-style:preserve-3d;
 80     -webkit-transform-style:preserve-3d;
 81    -moz-transform-style:preserve-3d;
 82    -o-transform-style:preserve-3d;
 83    -ms-transform-style:preserve-3d;
 84     position:relative;
 85 }
 86 .IEwp .filter .face,
 87 .IEwp .filter .back{
 88     backface-visibility:hidden;    
 89     transition:1s;
 90     transform-style:preserve-3d;
 91     -webkit-transform-style:preserve-3d;
 92    -moz-transform-style:preserve-3d;
 93    -o-transform-style:preserve-3d;
 94    -ms-transform-style:preserve-3d;
 95     position:absolute;
 96     top:0;
 97     left:0;
 98     color:#F00;
 99 }
100 .IEwp .filter .face{
101   background:#093;
102   transform:rotateY(0deg);
103   z-index:2;
104 }
105 .IEwp .filter .back{
106   background:#C6C;
107   transform:rotateY(180deg);
108 }
109 
110 </style>
111 <script type="text/">
112     window. = function()
113     {
114          function ep()
115         {
116             if(!!window.ActiveX || "ActiveX " in window)
117             {
118                 document.getElementById("wrapper").className = "IEwp";
119             }
120         }
121         ep();
122     }
123 </script>
124 </head>
125 
126 <body>
127 <div class="wrapper" id="wrapper">
128    <div class="filter">
129        <div class="face">
130            <h2>正面</h2>
131        </div>
132        <div class="back">
133            <h2>背面</h2>
134        </div>
135    </div>
136    
137 </div>
138 </body>
139 </html>

 

posted @ 2015-12-03 16:26  绝情的吉他  阅读(233)  评论(0)  编辑  收藏  举报