使用CSStranslateZ()和perspective()的技巧

在本文中，您将学习如何使用 CSS translateZ() 函数。在许多方面，它是一个独特的 CSS 功能，因为它挑战了网页只是一个 2D 视觉空间的想法。

CSS transform 属性有很多用于移动 HTMLElements 的函数。其中有translateX、translateY、translateZ函数。

虽然 translateX 和 translateY 非常简单，但 translateZ 更难理解。

让我们回顾一下 translateX 和 translateY 的工作原理：

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px);
}

HTMLElement 向右移动 11px，向下移动 20px。

它沿着 x 轴和 y 轴移动它。您可能还记得高中数学课上的这些术语！猜猜 translateZ 功能移动哪个轴？

这是正确的！ z 轴。它不会水平/垂直移动 HTMLElement，而是将它们移近或远离您。

使用 translateZ()

让我们尝试将 translateZ 添加到前面的代码片段中：

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px) translateZ(75px) perspective(200px);
}

您可能已经注意到另一个名为 perspective() 的 CSS 函数。实际上需要translateZ才能生效。忘记它是很常见的，因为 translateX 或 translateY 都不需要它……但你必须记住将它与 translateZ 一起使用！

透视（）做什么？

perspective() 函数定义了您的计算机屏幕平面和您正在应用 translateZ 的 HTMLElement 之间的虚拟距离。

这意味着 perspective(200px) 和 translateZ(75px) 在 HTMLElement 和计算机屏幕之间创建一个 200px 的虚拟空间，然后将其 75px 移动到更靠近您的位置。

这会导致 HTMLElement 看起来更大💗

同样，在 translateZ() 中使用负值会将其移得更远：

div#myCircle {
  background-color: gray;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform: translateX(11px) translateY(20px) translateZ(-100px) perspective(200px);
}

演示时间

这是一个使用 translateZ CSS 函数的小演示。尝试将鼠标悬停在按钮上！

button {
  /* abridged css values */
  transform: perspective(100px) translateZ(0px);
  transition: transform 100ms linear;
}

button:hover {
  transform: perspective(100px) translateZ(5px);
}

使用 translateZ 可以轻松创建引人入胜的视觉效果！

关于 translateZ() 的有趣事实

需要牢记 perspective 和 translateZ 的一些意外行为。

如果提供给 translateZ() 的值等于或高于提供给 perspective() 的值，它会导致 HTMLElement 消失。 您始终可以在 translateZ() 中设置无限小的值，但是反之则不成立……一旦超过 perspective() 的值，该元素将不再可见。
应用透视（0px）。 perspective() 的任何值都可以工作……除非它是零值（如 0px、0、0em）。这会导致忽略任何 translateZ() 效果。

结论

使用 translateZ 是将网页视为 3D 视觉空间的垫脚石……而不仅仅是 2D！希望您将它添加到您的工具箱中，它会帮助您创建引人注目的设计！

访问 MDN 以获取有关 translateZ 和 perspective 的文档📦🔍