2D动画的两个属性：
transform：针对一个元素只能用一次不能一次写给多个元素。
transition all 2s 过度效果，写在过度之前的样式里，不能写在hover里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 20px;
text-align: center;
line-height: 100px;
transition:all 3s;
}
.div1:hover{
transform: rotateZ(180deg) scale(2,2);
}
</style>
</head>
<body>
<!--1旋转--度 deg>-->
<div class="div1">文字</div>
<!--2位移--像素 px>-->
<div class="div2" style="transform: translateX(150px);">位移</div>
<!--3缩放--大于1 放大 小于1收缩 如果给两个参数代表 X，Y 逗号间隔-->
<div class="div3" style="transform: scaleX(1.5);" id="">缩放</div>
<!--4切斜-->
<div class="div4" style="transform: skewX(45deg);">倾斜X</div>
<div class="div5" style="transform: skewY(30deg);">倾斜Y</div>
<br /><br />
<div class="div6" style="transform: skew(30deg,30deg);">倾斜X,Y</div>
<!--5文字反倾斜 就是把文字在反过来写一遍-->
<div class="div7" style="transform: skewX(45deg);">
<p style="transform: scaleX(-45deg);">倾斜X</p>
</div>
</body>
</html>
来源：CSDN
作者：前端小布丁
链接：https://blog.csdn.net/weixin_46191548/article/details/104200712