1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 300px; 9 height: 300px;10 background-color: gold;11 margin: 100px auto 0;12 border: 3px solid #000;13 transform-style: preserve-3d; /* 设置盒子按3D空间显示 */14 transform: perspective(800px) rotateX(0deg); 15 /* 旋转变换的时候不设置初始值，容易出现跳边的bug，perspective(800px)，这里的800px是经验值，效果最好*/16 transition: all 2s ease;17 18 }19 20 .box:hover{21 transform: perspective(800px) rotateX(90deg);22 }23 </style>24 </head>25 <body>26 <div class="box"></div>27 </body>28 </html>
