css - 在后代中反转多个 CSS 转换

Question

我已经使用 skewX 和 skewY 在 css 中转换一个框。但是，我想在该平面上放置文本但无法反转效果:

.a3 {
  transform: skewX(69deg) skewY(-10.6deg);
}
.a3 > p {
  transform: skewX(-69deg) skewY(10.6deg);
}

<div class="a3">
  <p>Foo bar</p>
</div>

使用上面的代码，文本仍然是倾斜的。

反转偏斜的方法仅在有 1 个偏斜时有效，但在同时为 x 和 y 时无效。

Answer 1

一般来说，转换不是可交换的。

令 S = S₁ S₂ 是外部元素的变换矩阵，其中 S₁ 和 S₂ 是 的矩阵分别为 skewX(69deg) 和 skewY(-10.6deg)。

您想撤消对内部元素的转换。也就是说，您想对内部元素应用 T 转换，以便 S T = I，其中 I 是单位矩阵。

线性代数告诉我们

S T = I   ==>   T = S⁻¹ = (S₁ S₂)⁻¹ = S₂⁻¹ S₁⁻¹

实际上，现在内部元素的最终转换是

S T = (S₁ S₂) (S₂⁻¹ S₁⁻¹) = S₁ (S₂ S₂⁻¹) S₁⁻¹ = S₁ I S₁⁻¹ = S₁ S₁⁻¹ = I

回到你的案例，因为外部元素有 skewX(69deg) skewY(-10.6deg)，首先你必须撤消 skewY(-10.6deg)，然后撤消 skewX(69deg)。

因此，内部元素需要

transform: skewY(10.6deg) skewX(-69deg);

.a3 {
  transform: skewX(69deg) skewY(-10.6deg);
  border: 1px solid red;
}
.a3 p {
  transform: skewY(10.6deg) skewX(-69deg);
  border: 1px solid blue;
}

<div class="a3">
  <p>Foo bar</p>
</div>