CSS 数据类型

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

属性值

函数translateZ( ) 只能采用一个参数。

  • tz:它是一个 <length> 值指定元素向内或向外移动的距离。表示平移向量的 z 分量 [0, 0, tz]。正值将元素移向观察者，负值则移得更远。

语法

transform: translateZ(tz);

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

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

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

perspective() 允许使用除零值 (0px, 0, 0em) 以外的任何值，因为它会导致 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()进行转换

以下是translateZ()函数和perspective()的示例。应用该函数的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)）定位查看器。因此，在上面的示例中，值 0f 200px 表示用户位于图像前面 200 像素。

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

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