css3动画属性系列之transform细讲移动translate

上一篇讲了rotate，这一次我们再细讲一下translate

 

下面我们从3个方面开始介绍：

 

1、translate(x,y)  水平方向和垂直方向同时移动，

 

•  取值x表示x轴过渡值
•  取值y表示y轴过渡值  ----如果没有赋值，默认是0
•  默认以元素的中心点为基点，可以通过transform-origin进行基点的设置
•  x,y如果为负就反方向移动

translate(100px,200px);

 

 

2、translateX(<translation-value>)  通过给x方向上的指定参数值,实现x轴方向上的移动。

translateX(100px);

 

 

3、translateY(<translation-value>) 通过给y方向上的指定参数值,实现x轴方向上的移动。

 

translateY(200px);

 

 

评论

1 楼 乌托邦国王 2015-11-11  

引用

[u][/u]