在后代中反转多个 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>

在后代中反转多个 CSS 转换

Reverse multiple CSS transformations in a descendant

css

transform