2D转换
2D转换使用的属性是transform，用于对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和动画，可以取代大量之前只能靠Flash才可以实现的效果。属性值是多种转换方法的属性值，可以实现不同的转换效果。
位移translate()
transform 的属性值为 translate() 时，可以实现位移效果。
书写语法如下：
| 值 | 说明 |
|---|---|
| translate(x,y) | x,y分别为水平和垂直方向位移的距离，可以为px值或百分比，区分正负 |
| translate(x) | 只有一个数值，表示水平方向的位移 |
缩放scale()
transform 的属性值为 scale() 时，可以实现元素缩放效果。
书写语法如下：
| 值 | 说明 |
|---|---|
| scale(x, y) | x,y分别为改变元素的宽度和高度的倍数 |
| scale(n) | 只有一个值，表示宽度和高度同时缩放n倍 |
| scaleX(n) | 改变元素的宽度 |
| scaleY(n) | 改变元素的高度 |
旋转rotate()
transform 属性值设置为 rotate() 时，实现元素的旋转。
书写语法如下：
transform: rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值。
注意：元素旋转后，坐标轴也跟着发生转变。因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。
倾斜skew()
transform 属性值设置为 skew() 时，实现元素的倾斜。
书写语法如下：
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。
transform-origin属性
transform-origin用于设置调整元素水平和垂直方向原点的位置，调整元素的基准点，属性值包含两个，中间用空格分隔。
| 值 | 说明 |
|---|---|
| x | 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比 |
| y | 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比 |
3D转换
transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成 的平面效果多了一条 z 轴，如下图：
透视
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。 透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。 特点是近大远小。
注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。
透视属性 perspective
perspective用于设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。属性值是像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。
注意：透视属性需要设置给 3D 变化元素的父级。
3D旋转
3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：
| 值 | 说明 |
|---|---|
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转。
3D位移
类似的，位移也分为三个方向的移动：
| 值 | 说明 |
|---|---|
| translateX(x) | 设置 X 轴的位移值。 |
| translateY(y) | 设置 Y 轴的位移值。 |
| translateZ(z) | 定义3D位移，设置Z轴的位移值。 |
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应轴的负方向移动。
transform-style属性
transform-style用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。属性值有flat所有子元素在 2D 平面呈现以及preserve-3d保留 3D 空间，一般来说，该属性设置给 3D 变换图形的父级元素。
兼容问题
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
动画
css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。 css3 动画制作分为两步：创建动画、绑定动画。
@keyframes 规则
@keyframes 规则用于创建动画。 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。
需要使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。
书写方法：
@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 }
animation 属性
需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。animation 属性用于对动画进行捆绑。
语法：
div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； }
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。
| 单一属性 | 描述 |
|---|---|
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animationtiming-function | 规定动画的速度曲线。默认是 "ease"。 |
| animationdelay | 规定动画何时开始。默认是 0。 |
| animationiteration-count | 规定动画被播放的次数。默认是 1。infinite表示无限次播放。 |
兼容问题
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
