css - 为什么CSS旋转会弄乱 child 的歪斜

看一下，这是div，父级仅偏斜，然后子级偏斜。

子级（红框）：
倾斜：-40度

父级：倾斜：40deg

看起来如何...



不，如果我只是旋转父级，为什么红色框会被弄乱...

子级（红框）：
倾斜：-40度

父级：倾斜：40度旋转：40度。



因此，为什么whyyyy只是轮流做父母，使整个事情变得如此混乱。

http://codepen.io/anon/pen/IyBvt

我认为偏斜在旋转或其他方法后得到应用

最佳答案

您的方式，父级的倾斜度和孩子的倾斜度不再对齐。

如果将此样式设置为父样式，则它们是：

.box {
  background: lightblue;
  width: 100px;
  height: 100px;
  margin: 20px auto;
  transition: transform 1s linear;
  transform: rotate(40deg) skewy(40deg);
  transform-origin: right bottom;
  transform-style: preserve-3D;
}

请注意，我所做的唯一更改就是更改了订单，从

  transform: skewy(40deg) rotate(40deg) ;

至

  transform: rotate(40deg) skewy(40deg);

还要注意，现在，即使将孩子指定为“ Y”，其歪斜也会发生在40度（因为它在40度旋转范围内）

关于css - 为什么CSS旋转会弄乱 child 的歪斜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18676996/