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

position: absolute / fixedここでの問題は、高さ/幅が定義されていない div がしばしば消えるというよく知られた動作に似ていると思います。あなたの場合、3d キャンバスは幅が定義されていることを探しています<div class="div1">。それ以外の場合は、3d キャンバスを利用するプロパティを指定したため、空間に目的もなく浮遊し、間接的な方法で拡張しないと考えています子 div を含めます。

いずれにせよ、 JS フィドルの問題を修正する要素を定義するheightと、http: //jsfiddle.net/nY9v6/であることがわかります。widthpreserve-3d

于 2012-05-31T23:53:00.163 に答える
-3

良いサンプル

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

于 2012-08-03T12:24:11.407 に答える