css中 div整体旋转90度如何实现旋转后的元素宽度和高度撑满

在CSS中，如果你想让一个`div`元素整体旋转90度，并且旋转后的宽度变成原高度，高度变成原宽度，你可以使用`transform`属性结合`rotate()`函数。下面是一个示例：

.parent {
  perspective: 1000px; /* 创建3D空间 */
}

.child {
  width: 100%; /* 或者给定初始宽度 */
  height: 100%; /* 或者给定初始高度 */
  transform-origin: bottom center; /* 设置旋转中心点 */
  transform: rotate(90deg); /* 旋转90度 */
  backface-visibility: hidden; /* 隐藏未显示的面 */
  transition: all 0.5s; /* 可选，添加过渡效果 */
}

在这个例子中，`.child` 是你要旋转的`div`，将其放在一个具有`perspective`值的容器(`.parent`)中，可以使旋转效果更自然。`transform-origin`设置旋转中心点，这样在旋转后宽度和高度才会交换。

需要注意的是，如果`div`原本不是正方形，旋转后可能会有留白，你可能需要额外调整布局或者使用Flexbox或Grid等现代布局技术来保证旋转后的元素能够完全填充其容器。