先上效果截图
代码截图
截图中的红框代码就是实现旋转横屏dom元素的css核心代码,代码中的.content元素就是效果图中的红色区域的最外层,这里旋转过后原本的宽度要换成100vh,高度要换成100vw(我这里的宽度是95vh,是因为我有个底部留白占用了5vh,大家自己的因情况而定)
最后上代码:
.content{
width:95vh;
height: 100vw;
background-image: url('../../static/images/backgraund.png');
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotate(90deg);
transform-origin: 0% 0%;
position: absolute;
left: 100vw;
overflow: hidden;
}