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

问题描述

child（redbox）：
skewed：

-40deg

父母：扭曲： 40deg

看起来...

没有，如果我只是旋转父为什么红色框被弄乱了...

）：
skewed： -40deg

parent： skewed： 40deg / strong> 40deg。

因此，whyyyy只是将父母混淆了整个事情的混乱。

我认为歪斜在旋转或某事后应用

解决方案

你的方式，父母和

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

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

请注意，我所做的唯一更改是更改顺序， / p>

  transform：skewy（40deg）rotate（40deg）; 
  

到

  transform：rotate（40deg）skewy（40deg）; 
  

还要注意，现在儿童的歪斜即使被指定为Y发生在40度（因为它在40度旋转内）

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

解决方案

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)

这篇关于为什么css旋转乱搞孩子的歪斜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！