CSS | translateZ() 函数

简介

CSS的translateZ()函数用于将元素在3D空间中沿z轴方向移动。

语法：

transform: translateZ(z);

• z表示元素在z轴方向的移动距离。可以使用负数或者正数。正数表示远离屏幕，负数表示朝向屏幕。

例如：

transform: translateZ(100px);

特点

• 在2D空间中，translate()函数用于元素的平移，可以使用translateX()和translateY()分别控制元素在x轴和y轴方向上的移动。而在3D空间中，可以使用translateZ()函数来控制元素在z轴方向上的移动。

• translateZ()函数会产生一个3D变换，将元素从屏幕上抬起或放下。

• translateZ()函数只有在使用3D变换时才会生效。可以使用perspective()函数来创建一个3D视角，使translateZ()函数生效。

• translateZ()函数的值越大，元素离屏幕越远。值为正数时元素朝向观察者背离，值为负数时元素朝向观察者。

示例

HTML

<div class="box"></div>

CSS

.box {
   width: 100px;
   height: 100px;
   background-color: blue;
   transform: translateZ(100px);
}

在上面的示例中，元素 .box 会在3D空间中沿z轴方向移动100像素，使其向外突出显示。可以通过改变 translateZ() 函数中的值来调整元素的位置。

注意：为了在2D空间中应用3D变换，需要设置元素的 transform 属性为 translateZ() 函数，并为父元素设置 perspective属性。

浏览器兼容性

translateZ()函数在以下浏览器中得到支持：

• Chrome
• Firefox
• Safari
• Opera
• Edge
• Internet Explorer 10+

总结

通过 transateZ() 函数，我们可以在3D空间中控制元素在z轴方向上的移动，从而实现更加生动和立体的效果。与其他的变换函数结合使用，可以创建出更加丰富的3D效果。但要注意，为了使 translateZ() 函数生效，需要使用 perspective() 函数设置3D视角。