Css 不听话的孩子不听话

注意：这个问题是关于输出的问题，不是关于任何形状的创建

---

我最近创建了一个形状：

.prog{
位置：相对位置；
顶部：20px；
宽度：150px；
高度：120px；
背景：绿色；
显示：内联块；
变换：歪斜（20度）；
变换原点：0%100%；
过渡：0.8s缓解；
}
.prog:以前{
内容：“；
位置：绝对位置；
左：150px；
宽度：150px；
高度：120px；
背景：红色；
变换：歪斜（-40度）；
变换原点：0%100%；
过渡：0.8s缓解；
}

---

通过修改我的初始答案，它产生了一个输出，而不是一个解释，我假设*这种效果是可以看到的，因为你推测负偏斜可以用来偏移正偏斜曲线上的一个位置，而事实上，你在负偏斜曲线上操作的是负值

这首先要求歪斜的测量值是奇异的，并且发生在同一条曲线上（参见下面的正常曲线），允许正值和负值沿曲线移动

然而，负偏斜和正偏斜的曲线是反尾的

零偏斜是唯一一个在两个方向上操作相同的值。因此，如果您有一个元素，请对其应用20度的倾斜，然后应用-20度的倾斜。实际上，倾斜（正或负）为零，因此使用负偏移似乎是可行的

但是，如果随后应用其他负倾斜，则将有一个负倾斜元素，该元素的曲线不同，且不等于正倾斜曲线上的反向等效位置

20deg=原始元素，正斜曲线上20deg

20deg-20deg=0，正斜曲线和负斜曲线相同

-40deg=将当前元素倾斜20度，负倾斜曲线上减去40度=20度-不是正倾斜曲线上的等效“相反”点

当使用psuedos时，倾斜会起作用，因为您没有用新的负倾斜量偏移正倾斜值

---

*我不是数学家，所以恐怕我只能说这是猜测，我只想谈谈主要问题，即为什么会发生，而不是试图提供替代方案

因为你的数学似乎是精确的，我们必须寻找不精确的，那就是平台本身

声明它不是一种稳定的技术：

这是一项实验性技术
由于该技术的规格尚未稳定，请检查

（强调矿山）

考虑以下几点：

倾斜主div时，需要大量的浏览器渲染计算才能在二维环境中显示它在考虑3轴和3轴时的外观。。。伪元素会受到这些计算的影响，正如您所看到的，如果您将其从放置它的边缘往左移一点：

---

看，我刚刚移到左边，这导致它下降了一点，根据应用到主div的Y倾斜。现在，当你重新倾斜伪元素时，再加上另一个巨大的计算量。。。浏览器将无法提供3D空间在2D环境中的精确渲染…

skew引入的垂直偏移等于角度的切线。因此，倾斜（20deg）引入了tan（20deg）的偏移

为了让你的例子起作用，应该是

tan(-20deg) = tan(20deg) + tan( -2 * 20deg)

或

但事实并非如此，切线和求和并不相关

反转它所需的倾斜是

result = - atan ( 2 * tan (x))

对于x=20，结果为

36052388732387908475278040193987

（大概）

不听话的孩子的行为是正常的，这就是歪斜的工作方式。为了理解这一点，我将把问题简化为：

为什么

skewX（40度）

与

skewX（20度）skewX（20度）

不一样

div{
宽度：100px；高度：100px；
位置：绝对位置；
顶部：20px；左侧：20px；
变换原点：0；
}
.d1{
变换：skewX（40度）；
背景：红色；
不透明度：0.7；
}
.d2{
变换：skewX（20度）skewX（20度）；
背景：蓝色；
不透明度：0.7；
}
/**为了演示**/
正文{背景：url（'http://i.stack.imgur.com/GySvQ.png'）；背景大小：10px；}
.m{文本对齐：右；填充顶部：105px；}
.m1{宽度：83px；颜色：红色；右边框：1px纯红；}
.m2{宽度：72px；颜色：蓝色；右边框：1px纯蓝色；}
p{margin:05px150px；颜色：红色；}
.b{颜色：蓝色；}

x=83

x=72
倾斜（40度）

skewX（20度）skewX（20度）

@SW4我故意问这个问题！如果您使用的是两个不同的假动作，那么负角度确实有效啊哈！那样的话，我想是有人来找我了，呃；）好的工作伙伴-我的坏：我不认为统计环境中的倾斜可以直接与图形环境相比skew@vals，那么基础数学肯定是用来计算变换的吗？也就是说，如上所述，我不是数学家：）您的演示提供了一些见解。我认为正确解释所需要的数学比它第一次出现时要微妙得多。我真的很讨厌它，因为它太多了，浏览器无法处理答案。。。但是我缺乏正确的数学知识来获得更详细的答案…：/我认为

skewY（）

和

skewX（）

不涉及3Dcalculations@web-tiki-据我从W3规范中了解，每个

转换
属性最终都是用CTM（当前转换矩阵）计算的，它设置了一个3D上下文。。。您的最后一个示例中，红色元素稍微下降，这是根据规范所需的结果。浏览器在这里没有出现故障。
result = - atan ( 2 * tan (x))