7

下面的代码应该显示一个标题栏、一个页脚栏和一个图像，但由于某种原因，我一添加就.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>
4

2 回答 2

11

I think the problem here is similar to the well-known behavior where position: absolute / fixed div's that don't have a defined height / width can often disappear. In your case, the 3d canvas is looking for <div class="div1"> to have a width defined on it, otherwise it just floats aimlessly in space because you gave it properties that make use of the 3d canvas and I believe that in some indirect way causes it not to expand to contain the child divs.

In any case, you can see that defining height and width on the element with preserve-3d fixes the issue in the JS fiddle: http://jsfiddle.net/nY9v6/

于 2012-05-31T23:53:00.163 回答
-3

good sample

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

于 2012-08-03T12:24:11.407 回答