前端深入之css篇丨2020年前，彻底掌握css动画【transform】

写在前面

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？

说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。

前面几篇文章我们已经一起学习了animation和transition 的使用，如果有不了解的同学可以查看我的之前的文章。

今天我们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是很多初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，所以我把它们放到一块来写了，小伙伴们可不要混淆啊。

话不多说，马上跟我一起学习今天的主角transform吧。

transform 语法

值	描述
none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图.

transform字面上就是变形，改变的意思。看起来他有很多属性，其实我们把常用的总结起来就是下面四个属性。

• rotate(旋转)
• skew(扭曲)
• scale(缩放)
• translate(移动)

rotate 旋转

<style>
img{
    
    margin-left: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
}
@keyframes rotate{
    
    0%   {
    transform:rotate(0deg);}	
    100%   {
    transform:rotate(360deg);}
}
@keyframes rotateX{
    
    0%   {
    transform:rotateX(0deg);}	
    100%   {
    transform:rotateX(360deg);}
}
@keyframes rotateY{
    
    0%   {
    transform:rotateY(0deg);}	
    100%   {
    transform:rotateY(360deg);}
}

.rotate{
    
    animation:rotate 2s infinite l