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/

Answer 2

纠正@Andi North的建议。如果你想要包装器总是得到视口的高度你有2个解决方案或js或css3。我建议使用css3。

使用vw / vh，我们可以将元素的大小设置为相对于视口的大小。 vw / vh单位很有趣，因为1个单位反映了视口宽度的1/100。例如，要使元素成为视口的整个宽度，您可以将其设置为宽度：100vw。

在你的情况下只需添加包装元素＆＃39; height：95vh;＆＃39;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: yellow;
  overflow-x: hidden;
}

.rotation {
  position: relative;
  display: table;
  height: 500px;
}

.rotation::after {
  top: 0;
  left: -10%;
  content: '';
  position: absolute; /* Bring below content */
  background: lightblue;
  z-index: 1; /* Bring below content */
  transform: rotate(-5deg);
  width: 120%;
  height: 100%;
}

.wrapper {
  position: relative;/* Bring above background shape */
  z-index: 2; /* Bring above background shape */
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  text-align: center;
  height:95vh;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<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>
</body>
</html>

＆＃13;

干杯!!!

将一个带有文本的div居中于旋转的div中

2 个答案: