CSS 屏幕方向 WebApp 旋转

Question

试图将我的 WebApp HTML 锁定为 HTML5 视频的横向模式。 已经找到了一个很好的解决方案，但是它将屏幕旋转到-90度，但我需要+90度... 当我将 -90 更改为 90 时，视频播放器会从屏幕上消失。 我认为transform-origin 或top 或left 是错误的。 这里是 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;
    }
}

有什么想法吗？

Answer 1

尝试添加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）中检查它..