css全屏横屏 |ie css图片放大缩小

html, body {
height: 100%;
overflow: hidden;
}
.container {
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height */
transform: rotate(-90deg); /* rotate 90 degrees counter-clockwise */
transform-origin: top right; /* rotate around top right corner */
overflow-x: hidden; /* hide horizontal overflow */
overflow-y: scroll; /* enable vertical scrolling */
}
.container >* {
transform: rotate(90deg); /* rotate 90 degrees clockwise */
transform-origin: top right; /* rotate around top right corner */
}

上述代码将页面元素旋转90度，使其横向显示。其中，html, body元素的样式设置为100%的高度和隐藏溢出，这将确保容器元素将占满整个浏览器窗口。接下来，大家创建了一个容器元素并设置它的宽度和高度为100vw和100vh。它的transform: rotate(-90deg)属性让它逆时针旋转90度。同时，大家还设置了它的transform-origin: top right，这让它以右上角为中心旋转。为了防止横向溢出，大家将overflow-x设置为隐藏，并将overflow-y设置为滚动，从而启用纵向滚动。最后，大家使用transform: rotate(90deg)将内部元素顺时针旋转90度，从而使它们适应容器。