css3旋转动画循环 CSS3中Animation属性的使用详解？

CSS3中Animation属性的使用详解？ 1. Translate3d（x，y，z）用于控制元素在页面三轴位置上的位置；2。旋转（度）用于控制元件的旋转角度；3。倾斜[x，y]（DEG）用于倾斜。

CSS3中Animation属性的使用详解？

1. Translate3d（x，y，z）用于控制元素在页面三轴位置上的位置；

2。旋转（度）用于控制元件的旋转角度；

3。倾斜[x，y]（DEG）用于倾斜。做过设计的人可能知道这是在2D中创建3D透视图的必要属性；

4。Scale3d（x，y，z）用于放大和缩小效果，属性是ratio；

5，matrix3d，CSS matrix。通过这个矩阵属性，上面所有的属性值都被覆盖了，但是我觉得可读性非常差（所有的数字和单位，后面有点模糊），所以目前没有理由推荐。

CSS为什么这么难学？

随着技术的更新和迭代，前端工作越来越繁重和复杂。

CSS技术就像一个数学问题。它有太多的可变性。这就是困难所在。例如，您可以清楚地看到11=2，但是您是否需要考虑1 1000-10 1100 123的问题？

随着CSS3的出现，CSS不再简单，CSS3动画、变形、渐变、过滤器等

布局有弹性、网格等。就像数学问题一样，任何组合都是一种新类型的问题，变得极其复杂。所以学好基础知识更重要，要有各种知识，扎实的基础知识，看问题类型，有自己的想法，有多种解决方法，不受限制。CSS有复杂和困难的样式，我们可以使用多种解决方案，比如canvas、SVG、真不图像等等。