div整体旋转90度,并铺满屏幕
时间: 2024-10-20 22:15:11 浏览: 31
详解CSS3原生支持div铺满浏览器的方法
要让一个`<div>`元素整体旋转90度并铺满整个屏幕,你可以通过CSS来实现这一效果。首先,将该`div`设置为绝对定位,以便它可以脱离文档流并覆盖其容器。然后,使用`transform`属性结合`rotate()`函数来完成旋转。
以下是示例CSS代码:
```css
.parent-container {
position: relative;
}
.rotation-div {
position: absolute; /* 让元素脱离文档流 */
top: 0; /* 定位到屏幕顶部 */
left: 0; /* 定位到屏幕左边 */
width: 100%; /* 铺满宽度 */
height: 100%; /* 铺满高度 */
transform: rotate(90deg); /* 旋转90度 */
}
```
在这个例子中,你需要有一个`.parent-container`作为`rotation-div`的父元素,这样`.rotation-div`才能通过相对定位的方式占据屏幕。如果你想要实现在响应式布局下保持垂直方向的填充,可以考虑使用百分比或者固定值代替`width`和`height`。
阅读全文