CSS 变形(Transformation)
transform


rotate Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
scale Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
translate Translate就是基于X和Y 坐标重新定位元素
skew 顾名思义，skew就是要将对象倾斜，参数是度数
matrix transform支持矩阵变换，就是基于X和Y 坐标重新定位元素

Rotate(旋转)

1
2
3
4
5
6
#nav{
    -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
 -o-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

请注意在IE8中(非标准模式)它需要你写成”-ms-filter”而不是”filter”。
scale(缩放)

1
2
3
4
5
6
#nav{ 
 /* nav的宽度将是双倍，并且水平翻转，但是高度保持不变 */
   -webkit-transform:scale(-2, 1);
   -moz-transform:scale(-2, 1);
   -o-transform:scale(-2, 1);
}

负数值并不会缩小元素，而是翻转它(比如，文字被反转)然后相应的缩放它。
translate(重新定位)

1
2
3
4
5
6
#nav{
 /* 这会将nav元素向左移动10像素并向下移动20像素 */
 -moz-transform:translate(10px, 20px);
 -webkit-transform:translate(10px, 20px);
 -o-transform:translate(10px, 20px);
}

Skew(倾斜)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav{
 /* 这会将nav元素向左移动10像素并向下移动30像素 */
 -moz-transform:skew(30deg, -10deg);
 -webkit-transform:skew(30deg, -10deg);
 -o-transform:skew(30deg, -10deg);
}
```  
Matrix(矩阵变换)
链式变形
```css
#nav{
 -moz-transform:translate(10, 25) rotate(90deg) scale(2, 1);
 -webkit-transform:translate(10, 25) rotate(90deg) scale(2, 1);
 -o-transform:translate(10, 25) rotate(90deg) scale(2, 1);
}

transform-origin(用来指定transform的起点)
transition(变换)
变换通过改变不同元素状态之间的一个时间段内的样式来起作用


动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中
None 所有元素 所有元素的默认状态

transition-property 指定变换的CSS属性名称，比如，上面的例子中，将转换应用于background-color属性。
transition-duration 定义变换花费的时间（从旧属性换到新属性花费的时间）
transition-timing-function 可以理解为过度效果。指定变换过程中的中间值。可以用cubic-bezier指定。当然有几个常用的内置值：ease | linear | ease-in | ease-out | ease-in-out。
名称 如何工作
cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间，以定义用于Time function的贝塞尔曲线的形状。
linear 均速
ease 逐渐慢下来
ease-in 加速(渐入)
ease-out 减速(淡出)
ease-in-out 加速然后减速
transition-delay 这个比较容易理解，就是变换延迟的时间。时间可以为正整数、负整数和零，非零的时候必须设置单位是s(秒)或者ms(毫秒)，为负数的时候，变换的动作会从该时间点开始显示，之前的动作被截断。
多重变换可以在同一个变换属性定义中用逗号隔开。如果在同一个CSS规则中添加多个变换实例，那么最后的那个将会覆盖前面的。

1
2
3
4
5
6
7
8
a:hover {
 color: red;
 background-color: rgb(235,235,185);
 -webkit-transition: color .25s linear;
 transition: color .25s linear;
 -webkit-transition: background-color .15s linear .1;
 transition: background-color .15s linear .1;
}

可以赋予变换的CSS属性列表，附带转变的对象，高亮了一些比较有用的属性


CSS属性 改变的对象
background-color 色彩
background-image 只是渐变
background-position 百分比，长度
border-bottom-color 色彩
border-bottom-width 长度
border-color 色彩
border-left-color 色彩
border-left-width 长度
border-right-color 色彩
border-right-width 长度
border-spacing 长度
border-top-color 色彩
border-top-width 长度
border-width 长度
bottom 百分比，长度
color 色彩
crop 百分比
font-size 百分比，长度
font-weight 数字
grid-* 数量
height 百分比，长度
left 百分比，长度
letter-spacing 长度
line-height 百分比，长度，数字
margin-bottom 长度
margin-left 长度
margin-right 长度
margin-top 长度
max-height 百分比，长度
max-width 百分比，长度
min-height 百分比，长度
min-width 百分比，长度
opacity 数字
outline-color 色彩
outline-offset 整数
outline-width 长度
padding-bottom 长度
padding-left 长度
padding-right 长度
padding-top 长度
right 百分比，长度
text-indent 百分比，长度
text-shadow 阴影
top 百分比，长度
vertical-align 百分比，长度，关键词
visibility 可见性
width 百分比，长度
word-spacing 百分比，长度
z-index 正整数
zoom 数字

全部变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
*:link, *:visited, *:hover, *:active, *:focus {
-webkit-transition:
 color .25s linear,
 background-color .25s linear,
 border-color .25s linear;
transition:
 color .25s linear,
 background-color .25s linear,
 border-color .25s linear;
}
```  
Animation(动画)
<quote>
animation-name动画的名称。
animation-duration定义动画播放一次需要的时间。默认为0；
animation-timing-function定义动画播放的方式，参数设置类似transition-timing-function
animation-delay定义动画开始的时间
animation-iteration-count定义循环的次数，infinite即为无限次。默认是1。
-webkit-animation-direction动画播放的方向，两个值，默认为normal，这个时候动画的每次循环都向前播放。另一个值是alternate，则第偶数次向前播放，第奇数次向反方向播放。
</quote>
```css
#rotate {
 margin:0 auto;
 width:600px;
 height:400px;
 /* 确保我们是在一个 3-D 空间 */
 -webkit-transform-style:preserve-3d;
 /*让整个行使用x-轴旋转、7秒中的动画、无限次播放以及线性 */
 -webkit-animation-name:x-spin;
 -webkit-animation-duration:7s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-timing-function:linear;
}

/ 定义要调用的动画 /

1
2
3
4
5
 @-webkit-keyframes x-spin {
 0% { -webkit-transform:rotateX(0deg); }
 50% { -webkit-transform:rotateX(180deg); }
 100% { -webkit-transform:rotateX(360deg); }
}