translatez_使用CSS translateZ（）和Perspective（）的技巧

admin管理员组

文章数量:1566678

translatez

In this article, you’ll learn how to use the CSS translateZ() function. In many ways it’s a unique CSS function because it challenges the idea that the web page is just a 2D visual space.

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

The CSS transform property has a lot of functions for moving HTMLElements around. Among them are the translateX, translateY, and translateZ functions.

CSS转换属性具有许多用于移动HTMLElement的功能。 其中包括translateX ， translateY和translateZ函数。

While translateX and translateY are pretty straightforward, translateZ is slightly more difficult to understand.

虽然translateX和translateY非常简单，但是translateZ稍微难于理解。

---

---

Let’s review how translateX and translateY work:

让我们回顾一下translateX和translateY工作方式：

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

The HTMLElement is moved 11px to the right, and down 20px.

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

It’s moving it along x-axis and y-axis. You may remember these terms from Math classes in high school! Guess which axis the translateZ function moves?

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

That’s right! The z-axis. Instead of moving HTMLElements horizontally/vertically it moves them closer to you, or further away from you.

那就对了！ Z轴。 与其水平/垂直移动HTMLElement，不如将HTMLElement移近或​​移近。

使用translateZ() (Using translateZ())

Let’s try adding translateZ to the previous code snippet:

让我们尝试在之前的代码段中添加translateZ ：

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

You might have noticed another CSS function called perspective(). It’s actually required for translateZ to take effect. It’s common to forget it since neither translateX or translateY require it… But you gotta remember to use it with translateZ!

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

Perspective()有什么作用？ (What does perspective() do?)

The perspective() function defines the virtual distance between the plane of your computer screen and the HTMLElement you’re applying translateZ to.

Perspective()函数定义计算机屏幕的平面与您要应用translateZHTMLElement之间的虚拟距离。

This means perspective(200px) and translateZ(75px) creates a virtual space of 200px between the HTMLElement and the computer screen, and then moves it 75px closer to you.

这意味着perspective(200px)和translateZ(75px)在HTMLElement和计算机屏幕之间创建了200px的虚拟空间，然后将其向您移动了75px 。

This causes the HTMLElement to appear larger 💗

这将导致HTMLElement显得更大💗

Likewise using a negative value in translateZ() moves it further away:

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

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

演示时间 (Demo Time)

Here’s a small demo that uses the translateZ CSS function. Try hovering your mouse over the buttons!

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

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

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

It’s really easy to create compelling visual effects using translateZ!

使用translateZ创建引人注目的视觉效果非常容易！

有关translateZ()的有趣事实 (Interesting Factoids about translateZ())

There are some unexpected behaviors with perspective and translateZ to keep in mind.

有一些意想不到的行为，需要记住perspective和translateZ 。

• If the value provided to translateZ() is equal or higher than the one provided to perspective(), it causes the HTMLElement to disappear. You can always set an infinitely lesser value in translateZ() but the inverse is not true… Once you exceed the value of perspective() the element will no longer be visible.

  如果提供给translationZ()的值等于或大于提供给Perspective()的值，则它将导致HTMLElement消失。 您总是可以在translateZ()设置一个无限小的值，但是反之则不成立。一旦超过perspective()的值，该元素将不再可见。

• Applying perspective(0px). Any value for perspective() will work… unless it’s a zero value (like 0px, 0, 0em). This causes any translateZ() effects to be ignored.

  正在应用Perspective(0px) 。 对于任何价值perspective()会工作......除非它是一个零值(如0px ， 0 ， 0em )。 这将导致忽略任何translateZ()效果。

结论 (Conclusion)

Using translateZ is the stepping stone to seeing webpages as a 3D visual space… not just 2D! Hopefully you’ll add it to your toolbox and it’ll help you create compelling designs!

使用translateZ是将网页视为3D视觉空间的跳板，而不仅仅是2D！ 希望您将其添加到工具箱中，并可以帮助您创建引人注目的设计！

Visit MDN for documentation on translateZ and perspective 📦🔍

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

翻译自: https://www.digitalocean/community/tutorials/css-translatez-and-perspective

translatez

本文标签： 技巧cssperspectivetranslateZ