如果在属性末尾设置了透视图，CSS 3d 转换将不起作用

Question

我发现 transform 属性取决于 perspective() 位置

为什么会这样？ transform 还有其他规则/限制吗？

虽然我觉得很奇怪，但这似乎不是一个错误，因为我能够在 Chrome/FF 中重现它

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  font-size: 12px;
  perspective: 1000px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}

<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform: translate3d(0,0,100px) perspective(1000px);
</box>

Answer 1

在这两种情况下，您都应该首先创建透视图。如果加在最后，会先翻译，不考虑视角。

如果我们引用 specification我们可以看到转换矩阵是如何计算的:

The transformation matrix is computed from the transform and transform-origin properties as follows:

1. Start with the identity matrix.

2. Translate by the computed X and Y of transform-origin

3. Multiply by each of the transform functions in transform property from left to right

4. Translate by the negated computed X and Y values of transform-origin

正如您在步骤 (3) 中看到的那样，它是从从左到右(这是另一个问题，您可以在其中获得更多信息并了解顺序的重要性:Simulating transform-origin using translate)

使用perspective也是没用的要转换的元素中的属性。

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: perspective(1000px) translate3d(0, 0, 100px);
}

box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  /*perspective: 1000px;*/
  font-size: 12px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}

<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform:  perspective(1000px) translate3d(0,0,100px);
</box>

为避免与顺序混淆，您可以在父元素中声明透视图，但您需要注意原点，因为它不会相同:

box:nth-child(1):hover {
  transform:translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform:translate3d(0, 0, 100px);
}
body {
  perspective:1000px;
}
box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  font-size: 12px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}

<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform:  perspective(1000px) translate3d(0,0,100px);
</box>