css3 转换可见性问题答案

【问题标题】：css3 transform visibility issuecss3 转换可见性问题
【发布时间】：2015-01-02 23:36:46
【问题描述】：

我需要为移动网站修复横向，所以我使用@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

【问题讨论】：

媒体查询仅在满足其条件时才对内容进行样式设置，它们不会强制布局。所以如果页面的宽度大于高度，就会应用orientation:portrait CSS。
我知道这一点，我的问题是关于另一个麻烦。当我使用rotate (90) 时，内容框正在远离可见区域，所以我在问如何强制它显示。

标签： css transform css-transforms

【解决方案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 属性，它会根据左上角旋转。所以，它必须是负面的翻译才能可见。

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

【讨论】：