css3变换可见性问题

我需要修复移动网站的横向方向，所以我使用的是@media (orientation: portrait) {}。但我有一个问题，我找不到解决方案：使用身体变换 - 儿童项目显示外部框。下面有一个完整的例子。您可以保存它并使用移动仿真在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象是来自景观 - 与右填充于浅灰色的身体覆盖。这里是图像的例子它必须是：http://screencloud.net/v/EOXO

来源

2014-11-06 Oleg Frolov

只有满足条件时，媒体查询才会对内容进行样式设置，但不会强制布局。因此，如果页面的宽度超过高度，将应用'orientation：portrait' CSS。 – 2014-11-06 16:14:53

我知道这一点，我的问题是关于另一个麻烦。当我使用“旋转（90）”内容框正在远离可见区域时，所以我在询问如何强制显示它。 – 2014-11-06 17:02:32

我忘了这个问题。但是我找到了解决办法，也许它可能对某人有所帮助。这里是一个工作代码：

<!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>

所以。首先，我已将维度更改为视口相对值（100vh =视口高度的100％和视口宽度的100vw = 100％）。

然后，当我使用纵向方向转换时，我忘记了该宽度必须变成高度和高度=宽度。另外，如果我使用的是transform-origin属性，它会根据左上角来旋转。所以，它必须被翻译成可见的。

希望这个解决方案对别人有帮助。

来源

2017-05-17 15:14:35

css3变换可见性问题

回答

相关问题