本文素材来源于黑马程序员pink老师的前端教学视频。在此基础上有部分改动。

1. 2D转换

1.1 translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。

使用 translate() 方法元素保留原来的位置，不脱标。

1.2 rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

单位为deg，degree[dɪˈɡriː] 的缩写。

1.3 scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。

1.4 设置转换中心点

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

2. 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

2.1 @keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

2.2 CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

2.3 animation-timing-function

定义和用法

animation-timing-function 规定动画的速度曲线。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

2.4 animation-delay 属性

定义和用法

animation-delay 属性定义动画何时开始。

animation-delay 值以秒或毫秒计。

2.5 animation-iteration-count 属性

定义和用法

animation-iteration-count 属性定义动画的播放次数。

语法

animation-iteration-count: n|infinite;

2.6 animation-direction 属性

定义和用法

animation-direction 属性定义是否应该轮流反向播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

语法

animation-direction: normal|alternate;

2.7 animation-fill-mode 属性

定义和用法

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

2.8 animation-play-state 属性

定义和用法

animation-play-state 属性规定动画正在运行还是暂停。

此属性可在:hover伪类中使用，也可在js中使用，来暂停动画。

语法

animation-play-state: paused|running;

3. 3D转换

3.1 rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

3.2 rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

3.3 perspective 属性

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

语法

perspective: number|none;

3.4 transform-style 属性

定义和用法

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

语法

transform-style: flat|preserve-3d;