CSS translate3d()函数是CSS3中的一个变形函数,用于在三维空间中对元素进行平移。 语法: translate3d(tx, ty, tz)
参数说明: tx:表示元素在X轴上平移的距离,可以为正数、负数或百分比。 ty:表示元素在Y轴上平移的距离,可以为正数、负数或百分比。 tz:表示元素在Z轴上平移的距离,可以为正数、负数或百分比。
实例: 假设有一个div元素,样式如下:
/* 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。
效果:
上述代码的效果是将div元素向右下方平移50px,即div元素的左上角与原位置相比,向右下方移动了50px。
注意事项: