【原】前端|利用CSS制作动画效果

问题描述

问题分析

需要制作出此效果，我们首先需要对css动画有一定的了解，在此基础上，我们便能利用css代码写出此效果，那么关于css动画的代码有哪些呢？下面，我就为大家介绍一些关于css动画的代码。

解决方案

首先是关于css2D变换方法：

1. translate(x,y)：向x,y轴2D移动多少像素。

2. translateX（n）：向x轴移动。

3. translateY（n）：向y轴移动。

4. rotate(angle)：2D旋转。

5. scale(x,y)：2D缩放，若y未设置值默认取x的值。 

6. scaleX(n)：元素x轴缩放。

7. scaleY(n)：元素Y轴缩放。

8. skew(x-angle,y-angle):2D倾斜，第二个参数为设定，默认值为0。

9. skewX(angle):在x轴上进行倾斜。

10. skewY(angle):在y轴上进行倾斜。

css3D变换：

1. translate3d(x,y,z)：3D移动，所有参数不允许省略。

2. rotate3d(x,y,z,angle)：3D旋转，x，y，z为旋转方向，angle为旋转角度，参数不允许省略。

3. scale3d(x,y,z)：3D缩放，参数不允许省略。

4. 其他沿某一个方向的变换与css2D变换一致。

便可得到以下效果：

结语

本文介绍了如何运用css动画制作一个立体正方体，当我们阅读这篇文章后，我们还可用css动画效果制作更多更好看的图像，如果需要，可进行多次练习、摸索，也可百度找一些模板观察。