Why css rotate messes up child's skew

问题

take a look this is div without parent being rotated only skew and then child skewed back.

child(redbox): skewed:-40deg

parent: skewed: 40deg

how it looks...

No if i only just rotate parent why does the red box gets messed up...

child(redbox): skewed:-40deg

parent: skewed: 40deg rotated: 40deg.

so whyyyy does just rotating parent messes up the whole thing so confused.

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

i think skewed is getting applied after rotation or something

回答1:

The way you do it, the skew of the parent and the skew of the child are not aligned anymore.

If you set this style to the parent, they are:

.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;
}

Notice that the only change that I have made is changing the order, from

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

To

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

Also notice that now, the skew of the child, even though it is specified as "Y", is happening at 40 deg (because it is inside the 40deg rotation)

来源：https://stackoverflow.com/questions/18676996/why-css-rotate-messes-up-childs-skew