translate3d(x,y,z)
参数解析:
1.x:表示在x轴方向的位移。
2.y:表示在y轴方向的位移。
3.z:表示在z轴方向的位移。
代码实例:
1.x轴方向的位移:
蚂蚁部落
拖动按钮可以实现x轴方向位移的演示，一切都很清楚。
2.y轴方向的位移:
蚂蚁部落
拖动按钮可以实现Y轴方向位移的演示，一切都很清楚。
3.z轴方向位移:
蚂蚁部落
以上代码演示了我们的效果，当值越大时。视觉效果越大，值越小时，视觉效果越小，这个也应该很好理解，离的越近自然就越大，离的越远自然就看起来越小了。此代码和上面两个代码最大的区别在于应用了perspective属性，如果不使用此属性，将看不到演示效果，因为3D的场景就不会有景深的Z轴，关于perspective属性可以参阅CSS3的perspective属性详解一章节。
translate3d()函数也可以拆分单独写:
transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);
这里就不多介绍了，非常的简单，一看就明白。
原文地址是:CSS3的3D转换translate3d(x,y,z)函数一章节。
下载本文