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

Question

请看一看，这是div，没有父只被旋转，只有斜，然后子斜回来。

子(红盒)：斜：-40

父母：倾斜：40

看上去..。

​

​

不，如果我只是轮换家长，为什么红盒子会搞砸.

子(红盒)：斜：-40

父：斜：40，旋转：40。

​

​

所以whyyyy只是轮流做父母，把整件事搞得一团糟。

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 deg (因为它在40 deg旋转中)。