如果在属性的末尾设置了透视图，则CSS 3d转换将不起作用 [英] CSS 3d transform doesn't work if perspective is set in the end of property

问题描述

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

为什么会这样? transform的其他任何规则/限制?

why is this happening? any other rules/limitations for transform?

尽管对我来说很奇怪，但这似乎不是一个错误，因为我能够在Chrome/FF中重现此问题

though it feels strange to me, this not seems to be a bug as I am able to reproduce this in 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>

推荐答案

在两种情况下，您都应先制作perspective.如果您在末尾添加它，那么将首先进行翻译而无需考虑视角.

You should make the perspective first in both cases. If you add it at the end the translation will be first made without considering the perspective.

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

If we refer to the specification we can see how the transformation matrix is computed:

转换矩阵是根据转换和 transform-origin属性如下:

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

1. 从单位矩阵开始.

1. Start with the identity matrix.

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

Translate by the computed X and Y of transform-origin

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

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

通过对转换原点的X和Y取反的值进行翻译

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

在步骤(3)中可以看到，它是从左到右(这是另一个问题，您可以在其中获取更多信息并了解订单为什么重要: ://stackoverflow.com/questions/51077632/simulating-transform-origin-using-translate>使用翻译模拟转换原点)

As you can see in the step (3), it's from left to right (here is another question where you can get more information and see why order is important: Simulating transform-origin using translate)

在内部使用 perspective 属性也无济于事您要转换的元素.

It also useless to use the perspective property within the element you want to transform.

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>

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

To avoid any confusion with order you can declare the persepective within a parent element BUT you need to pay attention to the origin as it won't be the same:

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>

这篇关于如果在属性的末尾设置了透视图，则CSS 3d转换将不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！