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

Question

看一下这是div而没有父母只旋转歪斜然后孩子向后倾斜。

子（红盒子）： 的倾斜： -40deg

父母：倾斜： 40deg

看起来如何...

不，如果我只是旋转父，为什么红框搞砸了......

子（红盒子）： 的倾斜： -40deg

父级：倾斜： 40deg 已旋转： 40deg。

所以，为什么只是让父母变得困惑，让整个事情变得如此困惑。

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

我认为倾斜是在轮换之后应用

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