Question

我已使用skewX和skewY转换css中的一个框。但是，我想在那个平面上放置文字但不能反转这个效果：

＆＃13;

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

＆＃13;

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

＆＃13;

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

扭转歪斜的方法仅在有1个歪斜时有效，但在x和y时都不起作用。

Answer 1

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

允许S = S₁ S₂外部元素上的转换矩阵，其中S₁和S₂分别是skewX(69deg)和skewY(-10.6deg)的矩阵。< / p>

您想要撤消内部元素上的变换。也就是说，您希望将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);

＆＃13;

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

＆＃13;

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

＆＃13;

在后代中反转多个CSS转换

1 个答案: