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>
