css3转换可见性问题

我需要修复移动网站的横向，所以我使用@media (orientation: portrait) {}。但我有一个问题找不到解决方案：在使用身体变换后，子项目显示在框外。下面是一个完整的例子。您可以保存它并使用移动模拟在FF或chrome中运行（右键单击页面，然后"检查元素"，然后更改模拟类型）。

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

我忘了这个问题。但我找到了解决方案，也许对某些人有帮助。这是一个工作代码：

<!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%）。

然后，当我使用纵向转换时，我忘记了宽度必须变为高度和高度=宽度。

另外，如果我使用的是变换原点属性，它会根据左上角旋转。因此，它必须是负面翻译才能可见。

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

相关内容

最新更新

热门标签：