CSS3翻转方块 

1 .wutai{width: 1000px;;}
2 .container{position:relative;transform-style:preserve-3d;width: 100px;height: 100px;transition:all .5s linear;float:left;margin: 10px;}
3 .box1,.box2{position:absolute;width: 100px;height: 100px;line-height: 100px;font-family:arial;color:#CCC;text-align:center;font-size:40px;transform:perspective(500px);}
4 .box1{background: darkgreen;transform:rotateX(0deg) translateZ(50px);}
5 .box2{background: #C00;transform:rotateX(-90deg) translateZ(50px);}
6     .container:hover{transform:rotateX(90deg) rotateZ(0deg);}
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>CSS3翻转方块</title>
 7 </head>
 8 <body>
 9   <div class="wutai">
10     <div class="container">
11       <div class="box1">A</div>
12       <div class="box2">B</div>
13     </div>
14     <div class="container">
15       <div class="box1">B</div>
16       <div class="box2">C</div>
17     </div>
18     <div class="container">
19       <div class="box1">C</div>
20       <div class="box2">D</div>
21     </div>
22     <div class="container">
23       <div class="box1">D</div>
24       <div class="box2">E</div>
25     </div>
26   </div>
27 </body>
28 </html>

 

 

posted @ 2018-10-15 14:13  johnhery  阅读(505)  评论(0)    收藏  举报