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

【问题标题】：Why does "-webkit-transform-style: preserve-3d;" make some divs disappear?为什么“-webkit-transform-style:preserve-3d;”让一些 div 消失？
【发布时间】：2012-06-01 02:19:12
【问题描述】：

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

【问题讨论】：

标签： google-chrome css webkit css-transforms

【解决方案1】：

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

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

【讨论】：

没问题！重要的是要记住这些东西的规范还不是最终的。甚至 CSS3 动画（比 3d 画布更成熟的规范）也被发现有问题（因为规范，而不是因为浏览器实现）并且规范很快就会改变。
这很有趣，你知道讨论规范中的错误的任何文章吗？
没有，但我在周五与一位会议发言人聊了聊。不确定您是否意识到无法在 display: none 上执行 CSS 过渡/动画的问题。 Jonathan Snook 在这里讨论它：snook.ca/archives/javascript/preparetransition-jquery-plugin ...无论如何，他们认为该规范存在缺陷，无法在 display: none 上制作动画，并且很快就会改变。

【解决方案2】：

好样的

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

【讨论】：