div整体旋转90度如何实现高度和宽度100%撑满屏幕

要让一个`div`元素整体旋转90度并保持其高度和宽度占据屏幕100%，可以结合CSS的`transform`属性、`position`属性以及一些额外的技巧。这里是一个示例：

.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 使用视口的高度 vh */
  perspective: 1000px; /* 设置透视效果 */
}

.container .rotated-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transform: rotate(90deg) translate(-50%, -50%);
  width: 100%; /* 高度由rotate后的尺寸确定，可能会超出视口 */
  max-width: calc(100% - 2rem); /* 减去边距保证适应屏幕宽度 */
  box-sizing: border-box; /* 确保内边距和边框不会影响宽度 */
  background-color: #f0f0f0; /* 仅作为示例，替换为实际背景色 */
  padding: 1rem; /* 可调整内外边距 */
}

/* 如果需要保持原始宽高，可以添加这个类 */
.no-rotation {
  transform: none;
}

在这个例子中，我们创建了一个名为`.container`的容器，并将其设置为相对定位。然后，在`.container`内部，创建一个`.rotated-box`元素，将其绝对定位到中心，应用了旋转90度的效果。为了适应屏幕宽度，我们设置了最大宽度并减去了两边的偏移量。`box-sizing`属性用于处理内边距和边框对宽度的影响。

如果你不想让元素旋转，只需在需要的时候添加`.no-rotation`类即可取消旋转。