Question

如何使用CSS变换旋转body元素的背景？旋转body元素的内容工作得很好，旋转非体元素的背景也是如此：

＆＃13;

<style>
  body {
    background: url(https://upload.wikimedia.org/wikipedia/commons/3/35/Smile-sad.svg);
    transform: rotate(-45deg);
    font-size: 80px;
  }
  
  div {
    background: url(https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg);
    transform: rotate(-20deg);
  }
</style>

<body>
  AAAAAAAAAAAAAAAA
  <div>
    BBBBB
  </div>
</body>

＆＃13;

https://jsfiddle.net/9x8p2kzd/1/

为什么皱眉的旋转量与As的旋转量不同，就像微笑的旋转量与Bs一样？

Answer 1

这种情况正在发生，因为当你旋转身体时，你也在旋转身体的所有孩子。然后，当您旋转 children 时，您将在添加中将它们旋转到已经通过旋转元素的子项已经收到的旋转。

所以你的身体+ 身体中的div 正在被轮换-45deg，然后div被进一步旋转-20deg，感知{{1}的总感知轮换1}}。

你实际上想在这里实现什么效果？

Answer 2

将类添加到父div并对其应用转换

<style>
 .rotatebody{
    background: url(https://upload.wikimedia.org/wikipedia/commons/3/35/Smile-sad.svg);
    transform: rotate(-45deg);
    font-size: 80px;
  }
 .rotateinner {
   background: url(https://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg);
   transform: rotate(-20deg);
  }

</style>
<body>
   <div class="rotatebody">
      AAAAAAAAAAAAAAAA
      <div class="rotateinner">
         BBBBB
      </div>
   </div>
</body>

身体元素转动的背景

2 个答案: