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>