CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose

CSS3的3D转换translate3d(x,y,z)函数:
translate3d(x,y,z)只是规定3D转换的一种形式，更多相关内容可以参阅CSS3的3D转换效果详解介绍一章节。
此函数用来规定指定元素在三维空间中的位移。
语法结构:

translate3d(x,y,z)

参数解析:
1.x:表示在x轴方向的位移。
2.y:表示在y轴方向的位移。
3.z:表示在z轴方向的位移。
代码实例:
1.x轴方向的位移:

    
  
蚂蚁部落

x轴位移:
x:	(0)

拖动按钮可以实现x轴方向位移的演示，一切都很清楚。
2.y轴方向的位移:

    
  
蚂蚁部落

y轴位移:
y:	(0)

拖动按钮可以实现Y轴方向位移的演示，一切都很清楚。
3.z轴方向位移:

    
  
蚂蚁部落

z轴位移:
z:	(0)

以上代码演示了我们的效果，当值越大时。视觉效果越大，值越小时，视觉效果越小，这个也应该很好理解，离的越近自然就越大，离的越远自然就看起来越小了。此代码和上面两个代码最大的区别在于应用了perspective属性，如果不使用此属性，将看不到演示效果，因为3D的场景就不会有景深的Z轴，关于perspective属性可以参阅CSS3的perspective属性详解一章节。
translate3d()函数也可以拆分单独写:

transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);

这里就不多介绍了，非常的简单，一看就明白。

原文地址是:CSS3的3D转换translate3d(x,y,z)函数一章节。