css3transform

探究CSS3中的transition和transform属性

开门见⼭的说，

transition

、

transform

和

translate

这三者经常有⼈搞混，先把这三者做⼀个简单解释：

transform

是转换，指的是改变所在元素的外观，它有很多种⼿段(转换函数)来改变外观，例如位移、缩放、旋转等，⽽其中的位移的函数名

就叫

translate

，所以说，

translate

是

transform

的⼀部分。

transition

是过渡，指的是某个CSS属性值如何平滑的进⾏改变，就是平常说的动效。⽽

transform

是没有动画效果，你改变了它的值，元素的

样⼦就唰的改变了。

transition过渡

基本⽤法

好，接下来看⼀下

transition

的基本⽤法：

transition:[属性名][持续时间][速度曲线][延迟时间];

我们可以很⽅便的⽤这个过渡来给某⼀个属性加上好看的动效。例如，⾼度属性的值改变时，延迟0.5秒后以

ease

曲线进⾏过渡，持续2秒：

transition:height2sease.5s;

或者⼀个属性不够，想要监听所有属性。

transition:all2sease.5s;

注意，这⾥的所有属性是指能进⾏动画过渡的属性，有很多属性是不能进⾏过渡的，⽐如

display

，你不能让⼀个

div

的显⽰模式慢悠悠的发⽣过

渡。

有了上⾯的认识时候搭配

:hover

等可以引起属性值变化的伪类时就可以很轻松的做出⼀个动画效果：

.box{

width:10px;

transition:width0.4sease;

}

.box:hover{

width:50px;

}

给多个属性指定同⼀个过渡

接下来深⼊⼀点，如果你想给多个属性指定同⼀个过渡的时候该怎么做？如下：同时监听宽度和⾼度进⾏过渡

transition-property:width,height;

transition-duration:2s;

transition-timing-function:ease;

transition-delay:.5s;

场⾯有点控制不住了，其实这四条就是

transition

属性的四个值，也就是如下写法是等同的：

transition:width2sease.5s

//等同于

transition-property:width;

transition-duration:2s;

transition-timing-function:ease;

transition-delay:.5s;

但是，千万不要简写成这样！会报错的。⾄于为啥报错，看下⼀⼩节。

transition:height,width2sease.5s;

给多个属性指定多个过渡

咱们再深⼊⼀点，如果想指定

height

的过渡为

2s

，

width

的过渡为

3s

该怎么做呢？如下：

transition-property:height,width;

transition-duration:2s,3s;

//其他属性可以省略

这么写确实可以，第1个逗号前的为⼀组，第⼆个逗号前的为另⼀种...但是如果写的属性⽐较多的话，岂不是要开始数逗号了？所以我们可以⽤更

⽅便的写法简写⼀下：

transition:height2s,width3s;

这么看是不是舒服多了，这也是上⼀⼩节为啥报错的原因，

,

前必须是⼀个完整的过渡描述。

transform转换

基本⽤法

接下来把

transition

放⼀下来看看

transform

，基本格式如下：

transform:[转换函数];

先说基本⽤法，

transform

接受⼀个转换函数，每个转换函数都会有不同的效果，下⾯是三个主要的

2D

转换函数，更多函数点击W3C-CSS3

transform属性查看：

函数作⽤参数介绍参数默认值

translate(x,y)元素位移元素偏移的x轴和y轴距离，可为负(0px,0px)

scale(x,y)元素缩放元素x轴和y轴缩放的倍数，⼩于1为缩⼩，⼤于1位放⼤，⼩于0效果和为0时相等(1,1)

rotate(angle)元素旋转

旋转的⾓度，单位deg，顺时针旋转(0deg)

所以我们想移动当前元素的话就可以这样(往上移动10像素，往右移动10像素)：

transform:translate(-10px,10px);

指定多个转换效果

好，回忆起了基本⽤法之后就深⼊⼀点，如果想给当前元素配置多个转换效果怎么办，如下(向右下⾓移动10像素并顺时针旋转10°)：

transform:translate(10px,10px)rotate(10deg);

仔细看，转换函数之间可没有逗号。当初这个地⽅还坑了我⼀⼿。

transition+transform

下⾯这种写法可以给

transform

指定⼀个过渡：

transition:transform2sease.5s;

但是很容易就可以发现，这是给所有的转换函数都配置了相同的过渡啊，如果我想让位移

translate

过渡的慢⼀点，⽽旋转

rotate

过渡的快⼀点该怎

么办呢？

答案就是，使⽤

animation

动画效果，我暂时还没有找到只使⽤

transition

和

transform

就能给多个转换函数配置不同过渡的⽅法，有⼤佬知道⼀定要

告诉我，多谢！

transform对⽂档流的影响

如果使⽤

transition

监听基本属性，例如

height

或

width

等，其值在发⽣改变时就会对⽂档流产⽣影响，⽐如下图，⿏标悬停的

div

长宽变化会把其

他的

div

给“挤开”，甚⾄最边上的还挤到了下⼀⾏。并且，可以长宽属性在发⽣变化时元素的固定点不是中⼼，⽽是左上⾓，当初如何把固定点

换成中⼼可以困扰了我很久。

.box{

width:100px;

height:100px;

transition:all0.4sease;

}

.box:hover{

width:120px;

height:120px;

}

transition过渡基本属性

⽽使⽤

transform

则不会出现这种情况，如下。因为

transform

只会影响当前元素的状态，达到类似

position:relative;

的效果，⽽且

transform

是默认基

于元素的中⼼进⾏转换的，就算想改的话也可以使⽤

transform-origin

属性进⾏修改，具体⽤法⾮常简单，这⾥就不再赘述。

.box{

width:100px;

height:100px;

transition:all0.4sease;

}

.box:hover{

transform:scale(1.2,1.2);

}

transition过渡transform