css - 为什么css旋转会弄乱孩子的歪斜

Question

看看这是没有父级的 div 仅倾斜然后子级倾斜。

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

父母：倾斜： 40度

它看起来如何...

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

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

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

所以为什么只是轮换父母把整个事情搞得一团糟。

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

我认为 skewed 在旋转或其他东西后被应用

Answer 1

你这样做的方式，父母的歪斜和孩子的歪斜不再对齐。

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

.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 度旋转内）