CSS Ориентация экрана Вращение WebApp - PullRequest
Новая
       13

CSS Ориентация экрана Вращение WebApp

0 голосов
/ 04 июня 2018

пытается заблокировать мой 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;
    }
}

Есть идеи?

1 Ответ

0 голосов
/ 04 июня 2018

Попробуйте добавить 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>

Проверьте это на указанной ширине экрана (от 320 до 767 пикселей) ..

...