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>
