CSS3的动画变形transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

动画执行前：

代码图

1.旋转 rotate(n)

旋转函数 rotate()通过指定的角度参数使元素相对原点进行旋转；n 为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，则逆时针旋转

图为旋转250度之后的效果：

2.扭曲skew()

元素倾斜显示，将对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

3 种使用情况：

 skew(x,y)元素同时在水平方向和垂直方向扭曲；

 skewX(x)元素仅在水平方向扭曲；

 skewY(y)元素仅在垂直方向扭曲；

（3 ）缩放 scale()

——让元素根据中心原点对对象进行缩放。

3 种使用情况：

 scale(x,y) 使元素水平方向和垂直方向同时缩放；

 scaleX(x) 元素仅水平方向缩放；

 scaleY(y) 元素仅垂直方向缩放；

注意：scale()的取值默认为 1，当值设置为 0.01 到0.99 之间的任何值，作用使一个元素 缩小；而任何大于等于 1.01 的值，作用让元素 放大。

4 ）移 位移 translate

元素向指定的方向移动；

3 种情况：

 translate(x,y)水平方向和垂直方向同时移动；

 translateX(x)仅水平方向移动；

 translateX(x)仅水平方向移动

新手上道，多多指教。大神勿喷，有不同方式的欢迎评论留言指导哦！