过渡属性
属性名：transition
作用：在不使用flash动画或Javascript的情况下，使用transition可以实现补间动画（过度效果），并且当前元素只要有“属性”发生变化时即存在两种状态（a和b代指），那么a和b之间可以实现平滑的过渡动画效果
语法格式：transition：过度的属性 过度的时间 运动曲线 延时时间
单一属性写法
transition-property过渡的属性
- none表示没有属性过渡
- all表示所有变化的属性都过渡
- 属性名 使用具体的属性名，多个属性名中间逗号分隔
transition-timing-function 时间曲线
贝塞尔曲线
2D转换
属性名：transform
作用：对元素进行移动、缩放、转动、拉长或拉伸。配合过渡和动画，可以取代大量之前只能靠flash才可以实现的效果
属性值：多种转换方法的属性值，可以实现不同的转换效果
位移translate（）
transform的属性值为translate（）时。可以实现位移效果
书写语法：
注：可以使用translate（-50%）的方法实现水平居中
缩放scale（）
transform的属性值为scale（）时，可以实现元素缩放效果
书写语法：
旋转rotate（）
transform属性值设置为rotate（）时，实现元素的旋转
书写语法：
rotate（数字deg）
其中，deg为度数单位，正数代表顺时针旋转，负数代表逆时针旋转。2D的旋转只有一个属性值
注意：元素旋转后。坐标轴也跟着发生转变
因此，多个属性值同时设置给transform时，书写顺序不同会导致转换效果有差异
倾斜skew（）
transform属性值设置为skew（）时，实现元素的倾斜。
书写语法：transform：skew（数字deg，数字deg）；
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负。第二个数值不写，默认为0
transform-origin属性
作用：设置调整元素的水平和垂直方向原点的位置。
调整元素的基准点
属性值：包含两个。中间使用空格分隔
3D转换
transform属性不止能实现2D转换，也可以制作3D立体转换效果，比普通的ｘ、ｙ轴组成的平面效果多了一条ｚ轴。
透视：
透视属性：perspective
作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。
注意：透视属性需要设置给3D变化元素的父级
3D旋转
3D旋转比2D旋转更复杂。需要分别对三个方向的旋转角度值：
注意：3D旋转的属性值为负时逆时针旋转，为正时顺时针旋转
3D位移
属性值为像素值或百分比，正负表示位移的方向，正值向对应轴的正方向移动，负值向对应轴负方向移动。
注意：旋转和位移可以同时设置，但是顺序不同，会导致效果差异
transform-style属性
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：
flat：所有子元素在2D平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style：preserve-3d，来使其变成一个真正的3D图形
