一、2D变换
1、transform 设置或检索对象的转换
取值：
none：：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0。
translateX(<length>)：指定对象X轴（水平方向）的平移
translateY(<length>)：指定对象Y轴（垂直方向）的平移
rotate(<angle>)：指定对象的2D rotation（2D旋转）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：指定对象X轴的（水平方向）缩放
scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 skewX(<angle>)：指定对象X轴的（水平方向）扭曲
skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲
注：不同浏览器需写以下前缀。
| 内核类型 | 写法 |
|---|---|
| Webkit(Chrome/Safari) | -webkit-transform |
| Gecko(Firefox) | -moz-transform |
| Presto(Opera) | -o-transform |
| Trident(IE) | -ms-transform |
| W3C | transform |
例子：
CSS代码：
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);
}
HTML代码：
<div id="transform1">旋转了15度</div>
2、transform-origin 设置或检索对象以某个原点进行转换。
取值：
<percentage>：用百分比指定坐标值。可以为负值。
<length>：用长度值指定坐标值。可以为负值。
left：指定原点的横坐标为leftcenter①：指定原点的横坐标为
centerright：指定原点的横坐标为
righttop：指定原点的纵坐标为
topcenter②：指定原点的纵坐标为
centerbottom：指定原点的纵坐标为bottom
不同浏览器下的写法：
| 内核类型 | 写法 |
|---|---|
| Webkit(Chrome/Safari) | -webkit-transform-origin |
| Gecko(Firefox) | -moz-transform-origin |
| Presto(Opera) | -o-transform-origin |
| Trident(IE) | -ms-transform-origin |
| W3C | transform-origin |
例子：
CSS代码：
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);/*旋转15度*/
-webkit-transform-origin: left center; /*以左上角为原点旋转*/
}
HTML代码：
<div id="transform1"></div>
二、过渡样式
1、transition-property 检索或设置对象中的参与过渡的属性。
取值：
- all：所有可以进行过渡的css属性
- none：不指定过渡的css属性
- 有过渡效果的属性：
-
- 例子：
- CSS代码：
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color;
}
#transform1:hover
{
transition-duration:.5s;
transition-timing-function:ease-in;
background-color: yellow;
}
- HTML代码：
<div id="transform1">请将鼠标放在上面</div>
请将鼠标放在上面
2、transition-duration 检索或设置对象过渡的持续时间
transition-duration:time
例子可参见上个例子。
3、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)cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需 在[0, 1]区间内。
例子可参见上个例子。
4、transition-delay 设置对象延迟过渡的时间。
CSS代码：
#delay1
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay1:hover
{
transition-duration:1s;
transition-timing-function:ease-in;
background-color: black;
}
#delay2
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay2:hover
{
transition-duration:4s;
transition-timing-function:ease-in;
background-color: blue;
}
HTML代码;
<div id="delay1">延迟1s后开始过渡</div> <div id="delay2">延迟4s后开始过渡</div>
延迟1s后开始过渡
延迟4s后开始过渡
***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。
例：
CSS代码：
#all
{
width: 100px;
height: 100px;
background-color: red;
}
#all:hover
{
background-color: yellow;
transition-delay: .5s;
transition-timing-function: ease-in;
transform: scale(1.5,1.5);
transition-duration: 1s;
}
HTML代码：
<div id="all">请把鼠标放在上面查看效果</div>
请把鼠标放在上面查看效果