如果在属性的末尾设置了透视图，则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

perspective在这两种情况下，您都应该做第一个。如果在最后添加它，则将首先进行翻译而无需考虑视角。

如果我们参考规范，我们可以看到如何计算转换矩阵：

转换矩阵是根据transform和transform-origin属性计算的，如下所示：

1. 从身份矩阵开始。

2. 通过计算的变换原点的X和Y进行翻译

3. 从左到右分别乘以变换属性中的每个变换函数

4. 通过求反的转换原点的X和Y值进行转换

正如您在步骤（3）中看到的那样，它是 从左到右的（这是另一个问题，您可以在其中获取更多信息，并了解为什么顺序很重要：使用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>

为了避免与顺序混淆，您可以在父元素BUT中声明可透视对象，因此您需要注意原点，因为它不会相同：

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>