html - 在旋转的 div 中居中带有文本的 div

Question

我正在尝试旋转一个 div，我希望它覆盖主体的所有宽度。所以我尝试将宽度设置为 120%(显然 100% 是不够的)。但是，该“解决方案”的问题是我无法将 div 正确居中。我该如何解决？

这是我尝试使用的代码:

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: yellow;
  overflow-x: hidden;
}
.rotation {
  position: relative;
  display: table;
  width: 120%;
  height: 500px;
  transform: rotate(-5deg);
  background-color: green;
  margin-left: -50px;
}
.wrapper {
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
  transform: rotate(5deg);
}

 <h1>Some title</h1>

<div class="rotation">
  <div class="wrapper">
    <h1>Heading</h1>

    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span>
  </div>
</div>

JSFIDDLE

Answer 1

请问为什么要旋转整个元素然后再旋转里面的文本元素？

相反，我建议使用伪 (::before 或 ::after) 元素，它可以让您更好地控制背景并且意味着您不会旋转发短信两次。

这里有一个 JSFiddle 示例:https://jsfiddle.net/8nkz1278/1/