标签:ase :hover body 转变 ota 空间 html border transform
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>
标签:ase :hover body 转变 ota 空间 html border transform
原文地址:https://www.cnblogs.com/kogmaw/p/12492496.html