变换
详情看原文css3 | 浅谈transform变换
1.transform：transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2D转换：
- 平移 translate()：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
transform: translate(50px,100px);
}
- 旋转 rotate():rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
div {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
transform: rotate(30deg);
}
- 缩放 scale():scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
div {
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
- skew() 斜切:指定对象skew transformation（斜切扭曲）。包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜
skewY(<angle>);表示只在Y轴(垂直方向)倾斜
skew.jpg - transform-origin 属性
transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
取值：
<percentage>：用百分比指定坐标值。可以为负值。
<length>：用长度值指定坐标值。可以为负值。
left：指定原点的横坐标为left
center①：指定原点的横坐标为center
right：指定原点的横坐标为right
top：指定原点的纵坐标为top
center②：指定原点的纵坐标为center
bottom：指定原点的纵坐标为bottom
设置或检索对象以某个原点进行转换。
默认是横纵都是50%
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%
3D 转换
3d效果的坐标系：
- transform-style：指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
取值：
flat：指定子元素位于此元素所在平面内
preserve-3d：指定子元素定位在三维空间内
- perspective:perspective 定义了 3D 元素和视图之间的距离。设置的是透视镜头到 XY 轴平面的距离
perspective设置的是透视点到屏幕及(XYZ空间中Z=0平面的距离)，即透视点位置为(0, 0, 150px)
取值：
none：不指定透视
<length>：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
perspective 的值与元素呈现的大小无关，perspective 表示透视点到元素的距离，透视点越远，透视效果越差
添加了 perspective 属性的元素，添加后场景中出现 Z轴，故其子元素获得 3D 效果，包括 translateZ 和 rotateY/rotateX
-
perspective-origin:指定透视点的位置。
该属性提供2个参数值。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
取值：
<percentage>：用百分比指定坐标值。可以为负值。
<length>：用长度值指定坐标值。可以为负值。
left：指定原点的横坐标为left
center①：指定原点的横坐标为center
right：指定原点的横坐标为right
top：指定原点的纵坐标为top
center②：指定原点的纵坐标为center
bottom：指定原点的纵坐标为bottom
-
backface-visibility:指定元素背面面向用户时是否可见。
决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。
取值：
visible：指定元素背面可见，允许显示正面的镜像。(默认)
hidden：指定元素背面不可见
过渡
1.transition：复合属性。检索或设置对象变换时的过渡。
- transition-property：设置哪条css使用过渡
取值：
none：不指定过渡的css属性
all：所有可以进行过渡的css属性
<IDENT>：指定要进行过渡的css属性
- transition-duration：检索或设置对象过渡的持续时间。
transition-duration:.5s;
- transition-timing-function:检索或设置对象中过渡的动画类型。
取值：
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)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
teps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
- transition-delay:检索或设置对象延迟过渡的时间。
transition-delay: .9s;
动画
animation：复合属性。检索或设置对象所应用的动画特效。
-
animation-name：检索或设置对象所应用的动画名称**
必须与规则[@keyframes](http://css.doyoe.com/rules/@keyframes.htm)配合使用，因为动画名称由[@keyframes](http://css.doyoe.com/rules/@keyframes.htm)定义 如果提供多个属性值，以逗号进行分隔。
@keyframes 动画名称{
0%{transform:scale(4);opacity:0;}
40%{transform:scale(2);opacity:1;}
70%{transform:scale(2);opacity:1;}
100%{transform:scale(5);opacity:0;}
}
- animation-duration：检索或设置对象动画的持续时间
- animation-timing-function：检索或设置对象动画的过渡类型
取值：
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)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：等同于 steps(1, start)
step-end：等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
- animation-delay:检索或设置对象动画的延迟时间
- animation-iteration-count:检索或设置对象动画的循环次数
取值：
infinite：无限循环
<number>：指定对象动画的具体循环次数
- animation-direction:检索或设置对象动画在循环中是否反向运动
取值：
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
- animation-play-state:检索或设置对象动画的状态
取值：
running：运动
paused：暂停
- animation-fill-mode:检索或设置对象动画时间之外的状态
取值：
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
