1. transform 2d
| 名称 | 说明 |
|---|---|
| transform | 变形功能 |
| transform-orign | 指定变换起点 |
1.1 transform的属性值
| 名称 | 说明 | 参数 |
|---|---|---|
| translate/translateX/translateY | 平移 | 长度值或百分数 |
| scale/scaleX/scaleY | 缩放 | 数值 |
| rotate | 旋转 | 角度 |
| skew | 倾斜 | 角度 |
| matrix | 矩阵 | 略 |
例子：
transform: translateX(100px); transform: translateX(50%); transform: scale(2); transform: scale(0.5); transform: rotate(45deg);顺时针 transform: skew(45deg,45deg);// 水平方向(0-90有意义) 竖直方向(0-90有意义)
附skew资料：
多重效果并行：只是效果，没有过程，不存在线行：
transform: scale(0.5) rotate(45deg);
1.2 transform-orign
默认是中心点。可以设其他值。第一个参数是x轴，其值可以是left,center,right,也可以是百分数。第二个参数是y轴，其值可以是top,center,bottom，也可以使百分数。
例子：
transform-origin: 0 0;transform-origin: left top;transform-origin: 50% 50%;
2. transform 3d
| 名称 | 说明 |
|---|---|
| transform-style | 展现样式(flat/perserve3d) |
| perspective | 指定变换起点 |
2.1 transform
3d就是多了一个z轴。transfrom的属性值比2d多以下：
| 名称 | 说明 | 参数 |
|---|---|---|
| translate3d(x,y,z)/translateZ(z) | 平移 | 长度值或百分数 |
| scale3d(x,y,z)/scaleZ(z) | 缩放 | 数值 |
| rotateX(x)/rotate(y)/rotateZ(z) | 旋转 | 角度 |
| matrix3d | 矩阵 | 略 |
2.2 transform-style
指定嵌套元素如何在3d空间呈现。
| 名称 | 说明 |
|---|---|
| flat | 2d屏幕 |
| preserve-3d | 3d屏幕 |
2.3 perspective
指眼睛距离3d元素的距离。
| 名称 | 说明 |
|---|---|
| none | 默认值，表示无限的角度来看 3D 物体，但看上去是平的 |
| 长度值 | 接受一个长度单位大于0的值，其单位不能为百分比。值越大，角度出现的越远，就好比你人离远一点看物体。值越小，正相反。 |
2.4 perspective-origin
变型基点，同transform-origin
例子：
p{ width: 200px; height: 200px; background-color: gray;}p.b{ transform: translate3d(100px,100px,-200px);}div{ perspective: 1000px; transform-style: preserve-3d;} 3. transition
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如： :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：| 名称 | 说明 | 参数 |
|---|---|---|
| transition-property | 指定CSS 属性 | none,all,指定属性 |
| transition-duration | 所需时间 | 1s,2s |
| transition-timing-function | 过程函数 | ease,linear,ease-in,ease-out,ease-in-out |
| transition-delay | 延时 | 1s,2s |
| transition | 以上四种简写 |
没有过渡效果的例子：
div{ width: 200px; height: 200px; background-color: maroon; color: gray;}div:hover{ background-color: green; color: white;} hello world
加上过度效果：
div{ width: 200px; height: 200px; background-color: maroon; color: gray; transition-property: all; transition-duration: 2s; transition-timing-function: ease;} 简写形式：
transition: all 2s ease;
| 名称 | 说明 |
|---|---|
| linear | 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) |
| ease | 默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0) |
| ease-in | 元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0) |
| ease-out | 元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0) |
| linear | 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) |
| ease-in-out | 元素样式从初始状态过渡到终止状态时，先加速，再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) |
4. animation
CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation属性实现。那么之前的 transition属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。
animation 实现动画效果主要由两个部分组成：
1.通过类似 Flash 动画中的关键帧声明一个动画；2.在 animation 属性中调用关键帧声明的动画。
| 名称 | 说明 |
|---|---|
| animation-name | 用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes规则。CSS 加载时会应用 animation-name 指定的动画，从而执行动画。 |
| animation-duration | 用来设置动画播放所需的时间 |
| animation-timing-function | 用来设置动画的播放方式 |
| animation-delay | 用来指定动画的延迟时间 |
| animation-iteration-count | 用来指定动画播放的循环次数 |
| animation-direction | 用来指定动画的播放方向 |
| animation-play-state | 用来控制动画的播放状态 |
| animation-fill-mode | 用来设置动画的时间外属性 |
| animation | 以上的简写形式 |
代码：
@keyframes anim { 0%,100% { background-color: maroon; color: gray; } 50% { background-color: black; color: white; }}div{ width: 200px; height: 200px; background-color: maroon; color: gray;}div:hover{ animation-name: anim; animation-duration: 5s;} hello world
或者：
@keyframes anim { from { background-color: maroon; color: gray; } to { background-color: black; color: white; }} 简写：
animation: anim 5s ease;