转换---关键字： transform;
属性有：
1， 位移： translate （0px ，0px ）
属性值： （ 0px,0px ） 括号里跟两个值，用逗号分割，使元素沿x轴，y轴坐标位移，第二个值可以不给，如果不给则默认为0。
2， 缩放： scale （.5, .5）
属性值：（.5 , .5）括号里跟两个小数（百分数），用逗号分割，元素中心点做为缩放基点，
使元素沿x轴，y轴坐标按比例缩放，第二个值可以不给，如果不给则默认为0。
。
3， 旋转： rotate （5deg ） 或 rotate （1rad ） 其中 Rad ： 弧度， deg ： 度数。
以元素左上角为基点，按值并且顺时针旋转。
重置原点： transform-origin:0 0;
Origin 后面跟两个 number ， 使元素按x轴，y轴重置旋转原点。
4， 斜切（扭曲）： skew （1rad,1rad ）
属性值： （ 1rad,1rad ） 括号里跟两个弧度值 rad 确定扭曲程度，其值分别对应x,y轴，其第二个值可以不提供，如不提供则默认为0。
过度 （ 须在style里面定义）
过度---关键字： transition 后面紧跟4个值 如：
Transition:[transition-property]||[transition-duration]||
[transition-timing-function]||[transition-delay];
即： transition: all 4s linear 2s;
其值含义分别为：
1， property:检索或设置对象中的参与过度的属性，其取值范围有：
All（默认值）：所有可以进行过度的css属性。
None：不指定过度的css属性。
2， duration：检索或设置对象过度的持续时间，其取值范围有：
time：指定对象过度的持续时间。
3， timing-function：检索或设置对象中过度的动画类型，其取值范围有（列举5个）：
linear：线性过度。
Ease：平滑过度。
Ease-in：由慢到快。
Ease-out：由快到慢。
Ease-in-out：由慢到快再到慢。
4， delay：检索或设置对象延迟延迟过度的时间，其取值范围有：
time：指定对象过度的时间。
下面是一个代码实现过度的实例：
*{
margin: 0;
padding: 0;
}
.out {
width: 800px;
padding: 1px;
background-color: #999999;
}
.out div {
width: 100px;
height: 100px;
margin: 25px;
background-color: #21bbca;
font-size: 12px;
text-align: center;
line-height: 100px;
}
.inner1 {
-webkit-transition: all 4s linear;
}
.inner2 {
-webkit-transition: all 4s ease;
}
.inner3 {
-webkit-transition: all 4s ease-in;
}
.inner4 {
-webkit-transition: all 4s ease-out;
}
.inner5 {
-webkit-transition: all 4s ease-in-out;
}
.out:hover div {
margin-left: 75%;
-webkit-transform: rotate(360deg);
border-radius: 50%;
}
线性过渡
查看更多关于css3.0新增属性学习_html/css_WEB-ITnose的详细内容...