一切福田,不離方寸,從心而覓,感無不通。

CSS translate3d(x,y,z)

translate3d方法用来规定指定元素在三维空间中的位移。

用法比较简单,本文将通过一段代码实例动态演示translate3d的效果。

与二维空间位移相比多Z轴的位移,具体参阅CSS3 translate(x,y)一章节。

transform变换更多内容参阅CSS3 2D/3D转换一章节。

语法结构:

参数解析:

(1).x:表示在x轴方向的位移。

(2).y:表示在y轴方向的位移。

(3).z:表示在z轴方向的位移。

代码实例如下:

上面的代码结合JavaScript演示了translate3d方法的功能。

特别说明:如果不使用perspective属性,将看不到z轴演示效果,因为3D场景就不会有景深的Z轴。

perspective属性参阅CSS3 perspective一章节。

translate3d方法也可以拆分单独写:

 

from:http://www.softwhy.com/article-8720-1.html