css3 проблема видимости трансформирования

Мне нужно установить ориентацию ландшафта для мобильного сайта, поэтому я использую @media (orientation: portrait) {}. Но у меня есть одна проблема, которую я не могу найти решение: после использования body transform - дочерние элементы, отображающие внешнее поле. Ниже приведен полный пример. Вы можете сохранить его и запустить в FF или chrome с мобильной эмуляцией (щелкните правой кнопкой мыши на странице, затем «проверить элемент», затем измените тип эмуляции).css3 проблема видимости трансформирования

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample</title> 
<style> 
    * {margin: 0; paddin: 0} 
    html {position: relative; height: 100%} 
    body {background: #ccc; position: relative; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 30px} 
    .box {background: #777; position: relative; width: 100%; height: 100%} 

    @media (orientation: portrait) { 
     body { 
      -webkit-transform: rotate(90deg); 
      -webkit-transform-origin: left top; 
      transform: rotate(90deg); 
      transform-origin: left top; 
     } 
    } 
</style> 
</head> 
<body> 
    <div class="box"></div> 
</body> 
</html>

Таким образом, идея заключается в том, чтобы отобразить .box в портретном режиме, как это происходит в пейзаже - наложение на LightGray тела с правой набивкой. Вот пример изображения, как это должно быть: http://screencloud.net/v/EOXO

источник

2014-11-06 Oleg Frolov

Запросы в СМИ только стилизуют контент, когда выполняются их условия, они не форсируют макет. Поэтому, если ширина страницы больше высоты, применяется CSS-ориентир: портрет. –

Я знаю это и мой вопрос о другой проблеме. Когда я использую 'rotate (90), поле содержимого уходит от видимой области, поэтому я спрашиваю, как заставить его отображать. –

Я забыл об этом вопросе. Но я нашел решение, и, возможно, это может быть полезно для кого-то. Вот рабочий код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Sample</title> 
<style> 
    * {margin: 0; padding: 0} 
    body {background: #ccc; position: relative; width: 100vw; height: 100vh; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-bottom: 30px} 
    .box {background: #c00; position: relative; max-width: 100%; height: 100%} 

    @media (orientation: portrait) { 
     body { 
      transform: rotate(90deg) translateY(-100%); 
      transform-origin: left top; 
      width: 100vh; 
      height: 100vw; 
     } 
    } 
</style> 
</head> 
<body> 
    <div class="box"></div> 
</body> 
</html>

So. Прежде всего, я изменил размеры на относительные значения просмотра (100vh = 100% от высоты видового экрана и 100vw = 100% от ширины окна просмотра).

Затем, когда я использую преобразование в портретную ориентацию, я забыл, что ширина должна быть равна высоте и высоте = ширина.

Кроме того, если я использую свойство transform-origin, он вращается, как он, - на основе верхнего левого угла. Таким образом, это должно быть отрицательным, чтобы быть видимым.

Надеюсь, что это решение будет полезно для кого-то.

источник

2017-05-17 15:14:35

css3 проблема видимости трансформирования

ответ

Смежные вопросы