CSS translate3d()实例讲解

CSS translate3d()函数是CSS3中的一个变形函数，用于在三维空间中对元素进行平移。 语法： translate3d(tx, ty, tz)

参数说明： tx：表示元素在X轴上平移的距离，可以为正数、负数或百分比。 ty：表示元素在Y轴上平移的距离，可以为正数、负数或百分比。 tz：表示元素在Z轴上平移的距离，可以为正数、负数或百分比。

实例： 假设有一个div元素，样式如下：

Translate3D Example

/* CSS代码 */ #translate3d-example { width: 200px; height: 200px; background-color: red; transform: translate3d(50px, 50px, 0px); }

解释： 上述代码中，div元素的宽度和高度都为200px，背景颜色为红色。transform属性使用了translate3d()函数，将元素在X轴上平移了50px，在Y轴上平移了50px，在Z轴上平移了0px。

效果：

Translate3D Example

上述代码的效果是将div元素向右下方平移50px，即div元素的左上角与原位置相比，向右下方移动了50px。

注意事项：

1. translate3d()函数可以同时对元素在X轴、Y轴和Z轴上进行平移。
2. translate3d()函数的参数可以为正数、负数或百分比。
3. translate3d()函数可以与其他变形函数（如scale()、rotate()等）结合使用。