CSS 屏幕方向 WebApp 旋转

Question

正在尝试将我的 WebApp HTML 锁定为 HTML5 视频的横向模式。已经找到了一个很好的解决方案，但是它将屏幕旋转到 -90deg 但我需要 +90deg ... 当我将 -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）..

CSS 屏幕方向 WebApp 旋转

CSS Screen Orientation WebApp Rotation

html

css

transform

css-transforms