第十节 css3动画之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: 100px; 9 height: 100px; 10 background-color: gold; 11 margin: 50px auto 0; 12 transition: all 0.5s ease 0s; /* 同时加入动画效果 */ 13 } 14 15 .box:hover{ 16 /* transform位移比定位位移的性能更高,因为其不影响整体布局,建议使用transform位移 */ 17 transform: skew(45deg); /* x轴斜切45度 */ 18 transform: skew(0,45deg); /* y轴斜切45度 */ 19 } 20 </style> 21 </head> 22 <body> 23 <div class="box"></div> 24 </body> 25 </html>
标签:css3,45deg,45,100px,transform,第十节,斜切,位移 来源: https://www.cnblogs.com/kogmaw/p/12492483.html