CSS 函数 - translateZ()

CSS 中的 translateZ() 函数用于沿 Z 轴（即 3D 空间中远离或靠近查看者）平移或移动元素。它是 CSS 中的转换函数之一，允许您修改网页上元素的位置和外观。结果是 <transform-function> 数据类型。

可能的值

translateZ() 函数只能接受一个参数。

tz：它是一个 <length> 值，用于指定元素或元素移动的距离。表示平移向量的 z 分量 [0, 0, tz]。正值将元素移向查看者，负值将元素移离查看者。

语法

transform: translateZ(tz);

perspective() 函数定义了计算机屏幕平面与您应用 translateZ 的 HTML 元素之间的虚拟距离。

使用 perspective() 和 translateZ() 函数会出现一些意外的行为。

当提供给 translateZ() 的值大于或等于 perspective() 的值时，应用它的 HTML 元素将消失。

除了零值（0px、0、0em）之外，任何值都允许用于 perspective()，因为它会导致 translateZ() 效果被忽略。

CSS translateZ() - 悬停时的平移

以下是在按钮上使用伪类 :hover 与 translateZ() 函数的示例。按钮的大小和位置在悬停时会发生变化

<html>
<head>
<style>
   div {
      height: 200px;
      width: 300px;
      border: 5px solid black;
      background-color: beige;
      margin: 50px;
      display: inline-block;
   }
   
   button {
      transform: perspective(150px) translateZ(20px);
      transition: transform 100ms linear;
      width: 80px;
      height: 30px;
      background-color: blue;
      color: white;
      margin: 30px;
   }

   button:hover {
      transform: perspective(150px) translateZ(80px);
   }
</style>
</head>
<body>
   <div>
      <h2>translateZ() example</h2>
      <button>click</button>
   </div>
</body>
</html>

CSS translateZ() - 带有 perspective() 的平移

以下是在 perspective() 以及 translateZ() 函数一起使用的示例。应用该函数的 div 元素的位置基于传递给 translateZ() 函数的值。

<html>
<head>
<style>
   div {
      height: 110px;
      width: 110px;
      border: 2px solid black;
      background-color: aquamarine;
      margin: 15px;
   }

   .translate-z-length {
      transform: perspective(200px) translateZ(50px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div>No translateZ() applied</div>
   <div class="translate-z-length">translateZ() applied</div>
</body>
</html>

更改 perspective() 和 translateZ() 的值以查看效果。

perspective() 函数负责相对于平面（即屏幕表面 (z=0)）定位查看者。因此，在上面的示例中，200px 的值意味着用户在图像前面 200 像素。

translateZ() 的值 50px 表示元素从屏幕向外移动 50px，朝向用户。在 2D 显示器上查看时，元素看起来更大。

函数的编写顺序很重要，因为转换的组合不是可交换的。perspective() 函数应放在 translateZ() 函数之前。

打印页面