Почему «-webkit-transform-style: save-3d;» заставить некоторые div исчезнуть?

Следующий код должен отображать панель заголовка, панель нижнего колонтитула и изображение, но по какой-то причине, как только я добавляю .div1 { -webkit-transform-style: save -3д; }Я получаю только панель заголовка. Я знаю, что в нем применены некоторые ненужные элементы 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>
7
задан Laurent 12 May 2014 в 19:54
поделиться