时间戳

首页 > 解决方案 > CSS 屏幕方向 WebApp 旋转

html - CSS 屏幕方向 WebApp 旋转

问题描述

试图将我的 WebApp HTML 锁定为 HTML5 视频的横向模式。已经找到了一个很好的解决方案，但是它将屏幕旋转到 -90 度，但我需要 +90 度...当我将 -90 更改为 90 时，视频播放器从屏幕上消失。我认为transform-originor 和toporleft是错误的。这里的CSS：

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    html {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
}

任何的想法？

标签： htmlcsstransformcss-transforms

解决方案

尝试添加left:50px......因为你已经给出了overflow-x:hidden，你看不到它已经被左移了，因为加旋转..

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
   html {
    transform: rotate(90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    /*top: 100%;*/
    left: 50px;
}
}
<html>
<head>
</head>
<body>
 <h1>Hello World</h1>
</body>
</html>

检查它在提到的屏幕宽度（320px 到 767px）..

推荐阅读