CSS3详解：transform、transition

CSS3 transform是什么？

transform的含义是：改变，使…变形；转换

 

CSS3 transform都有哪些常用属性？

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

下面我们来分解各个属性的用法：

transform:rotate()：

含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”。

.demo_transform1{
    transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
}

 

transform:skew()：

含义：倾斜；其中“deg”是“度”的意思，如“20deg”表示“10度”。

.demo_transform2{
    transform:skew(20deg);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
}

 

transform:scale(x,y)：

含义：比例；可传2个值，当写一个时，表示xy都一样，“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。

.demo_transform2{
    transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
}

 

transform:translate(x,y)：

含义：变动，位移；可以传3个值，x、y。

也可以写成 translateX( ), translateY( ).

如表示向右位移100像素，即第一个值为100px，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。

.demo_transform2{
    transform:translate(100px,0);
    -webkit-transform:translate(100px,0);
    -moz-transform:translate(100px,0);
}

或者

.demo_transform2{
    transform:translateX(100px);
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
}

 

CSS3 transition 过度效果

当鼠标经过时，宽度边为300px,时长为 2 秒：

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
}
div:hover {
width:300px;
}

transition有4个属性:

1、transition-property：规定应用过渡的 CSS 属性的名称。with可获得宽度属性，height可获得高度属性，transform可获得动画属性，all 可以获取所有属性，所以推荐写all

2、transition-duration：定义过渡效果花费的时间。默认是 0。

3、transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。有5个属性，分别为：

• linear--匀速   规定以相同速度开始至结束的过渡效果   
• ease--慢-快-慢   规定慢速开始，然后变快，然后慢速结束的过渡效果
• ease-in--慢-快   规定以慢速开始的过渡效果
• ease-out--快-慢   规定以慢速结束的过渡效果
• ease-in-out--慢-快-慢   规定以慢速开始和结束的过渡效果

4、transition-delay：规定过渡效果何时开始。默认是 0。

4个属性可以合起来写

div{
    transition: all 1s linear .5s;
    /*4个属性分别表示：所有属性都有动作效果、动作时间为1S、速度为匀速、延迟0.5S开始动画*/
}