CSS3新增样式大解析：[4]translate-元素位移

CSS3新增样式大解析：[4]translate-元素位移

CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等等。今天我就跟大家先讲讲translate的操作。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适用不同的浏览器。

这是初始状态下的效果图。

CSS样式：

HTML代码：

两个div，children的位置是固定的。作为对比，下面将对demo进行translate操作。

使用说明：translate可设置两个值。

我们先看两个值的情况：

transform:translate(100px,100px);

可以看出demo向右和下方都移动了100像素。

为1个值的情况1。

transform:translate(100px);

显示的效果如下图，可以看到只有一个值的时候默认的是想X轴正方向移动的。

这个时候等价于transform:translateX(100px);

translate可单独对某个方向进行便宜（X、Y轴），因此他可以这样写：

transform:translateX(100px);

transform:translateY(100px);

下图是采用了transform:translateY(100px);很明显他是向负方向移动的。

说明：W3C标准有提到tanslateZ（）(3D变化)这一个属性。这一属性在某种程度上相当于scale效果。参看下图（模拟）。但就目前而言translateZ这一属性的浏览器支持效果并不理想。

如果你认为translate（）中应当可以传入3个值，分别对应XYZ，但事实上（亲身试验），若传入3个值浏览器无法识别该属性。

这个原因是translate默认的是2D的转换效果，所以不支持Z属性。所以你如果相传如3个参数，那就是用translate3D（X,Y,Z）

说明二：个人认为单纯的对某个元素的样式设置translate值没有什么实际效果。这个值多结合了@key-frames一起使用，用来做动画效果。实现左右上下的移动。

当然在jQuery当中也有模拟位移的动画的（通过animate：left等属性实现），但是jQuery要求对位移的元素必须定位设置position属性，而translate则不用。