当前位置: 代码迷 >> HTML/CSS >> css3卡通属性系列之transform细讲移动translate
  详细解决方案

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

热度:143   发布时间:2012-09-19 13:43:54.0
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);
?

?