Question

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

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

Answer 1

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

<!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属性，它会根据左上角旋转。因此，必须将其反转为可见。

希望此解决方案对某人有所帮助。

css3转换可见性问题

1 个答案: