Question

以下代码应显示标题栏，页脚栏和图像，但出于某种原因，只要我添加.div1 { -webkit-transform-style: preserve-3d; }，我就会得到标题栏。我知道它似乎有一些不必要的div和样式应用，但我确实需要它们的效果，我已经剥离，使调试更容易。我的页面代码是：

<html>
    <head>
        <title></title>
        <style>
            body {
                margin: 0px;
            }
            .div1 {
                -webkit-transform-style: preserve-3d;
            }
            .div2 {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            img {
                max-width: 50%;
                max-height: 50%;
                display: block;
            }            
            .footer {
                position: fixed;
                bottom : 0px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <div class="header">
                    Header
                </div>
                <div class="imgdiv">
                    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg">
                </div>
                <div class="footer">
                    Footer
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

我认为这里的问题类似于众所周知的行为，position: absolute / fixed div没有定义的高度/宽度常常会消失。在你的情况下，3d画布正在寻找<div class="div1">在其上定义宽度，否则它只是在空间中漫无目的地漂浮，因为你赋予它使用3d画布的属性，我相信以某种间接的方式导致它不扩展以包含子div。

无论如何，您可以看到在height元素上定义width和preserve-3d修复了JS小提琴中的问题：http://jsfiddle.net/nY9v6/

Answer 2

好样本

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

为什么“-webkit-transform-style：preserve-3d;”让一些div消失？

2 个答案: