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

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