CSS3 + HTML5 achieve DIV 3D rollover effect

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <script src="AccountGoodsTrade/js/jquery.min.js"></script>
  7     <style>
  8         #my3dspace {
  9             margin-top: 100px;
 10             -webkit-perspective: 1500;
 11             -webkit-perspective-origin: 10% 10%;
 12             overflow: hidden;
 13         }
 14 
 15         #pagegroup {
 16             width: 700px;
 17             height: 400px;
 18             margin: 0 auto;
 19             -webkit-transform-style: preserve-3d;
 20             transform-style: preserve-3d;
 21             position: relative;
 22         }
 23 
 24         .page {
 25             top: 50px;
 26             width: 500px;
 27             height: 300px;
 28             background-color: black;
 29             font-weight: bold;
 30             position: absolute;
 31             transition: all 3s;
 32             backface-visibility: hidden;
 33             border-radius: 40px;
 34             cursor: default;
 35         }
 36 
 37         #page1 {
 38             -webkit-transform-origin: center;
 39             -webkit-transition: -webkit-transform 2s linear;
 40         }
 41 
 42         #page2, #page3 {
 43             -webkit-transform-origin: center;
 44             -webkit-transition: -webkit-transform 2s linear;
 45             -webkit-transform: rotateY(180deg);
 46         }
 47 
 48         #op {
 49             text-align: center;
 50             margin: 40px auto;
 51         }
 52 
 53             #op > a {
 54                 text-decoration: none;
 55             }
 56 
 57         .c1 {
 58             background-color: red
 59         }
 60 
 61         .c2 {
 62             background-color: green
 63         }
 64 
 65         .c3 {
 66             background-color: yellow
 67         }
 68     </style>
 69 </head>
 70 <body>
 71     <div id="my3dspace">
 72         <div id="pagegroup">
 73             <div class="page c1" id="page1">   1111</div>
 74             <div class="page c2" id="page2">   2222</div>
 75             <div class="page c3" id="page3">   3333</div>
 76         </div>
 77     </div>
 78     <div id="op">
 79         <input id="Radio1" name="rdo" value="1" onclick="rdoClick()" onmouseUp="rdoMouseUp()" checked="checked" type="radio" />
 80         <input id="Radio2" name="rdo" value="2" onclick="rdoClick()" onmouseUp="rdoMouseUp()" type="radio" />
 81         <input id="Radio3" name="rdo" value="3" onclick="rdoClick()" onmouseUp="rdoMouseUp()" type="radio" />
 82         <input id="Radio4" name="rdo" value="4" onclick="rdoClick()" onmouseUp="rdoMouseUp()" type="radio" />
 83 
 84     </div>
 85 
 86     <script>
 87         var temp = 0;
 88         var tempBlur = 0;
 89         function rdoMouseUp() {
 90             var tradeType = $("input[name = 'rdo']:checked").val();
 91             if (tradeType == 1) {
 92                 tempBlur = 1;
 93             }
 94             else if (tradeType == 2 || tradeType == 3) {
 95                 tempBlur = 2;
 96             }
 97             else if (tradeType == 4) {
 98                 tempBlur = 3;
 99             }
100         }
101         function rdoClick() {
102             var tradeType = $("input[name = 'rdo']:checked").val();
103             if (tradeType == 1) {
104                 temp = 1;
105             }
106             else if (tradeType == 2 || tradeType == 3) {
107                 temp = 2;
108             }
109             else if (tradeType == 4) {
110                 temp = 3;
111             }
112             var a = temp;
113             var b = tempBlur;
114 
115             if (a > b) {
116                 document.getElementById('page' + temp).style.webkitTransform = "rotateY(0deg)";
117                 document.getElementById('page' + tempBlur).style.webkitTransform = "rotateY(180deg)";
118             } else if (a < b) {
119                 document.getElementById('page' + temp).style.webkitTransform = "rotateY(0deg)";
120                 document.getElementById('page' + tempBlur).style.webkitTransform = "rotateY(-180deg)";
121             } else if (a == b) {
122                 return;
123             }
124 
125         }
126     </script>
127 </body>
128 </html>
CSS3 + HTML5 achieve DIV 3D rollover effect

Guess you like
