2

解決済み: 変換に関する w3 仕様を読み直した後、フッターが DOM 構造のために 3D コンテキストの一部と見なされ、回転された要素の影響を受けていることに気付きました。.cardsContainer を別の要素 .cards3dContainer 内に配置するだけで、フッターは 3d コンテキストの一部と見なされなくなりました。

-webkit-パースペクティブ:1000px; DOM のその時点で 3D コンテキストが始まると述べているようです。

css3 変換を使用して回転し、別の div のボタン ヒット領域の一部を上書きするコンテナに大きな問題があります。

変換は視覚的に機能し、コンテナーは後ろに傾いています (rotateX を使用)。ただし、フッターのボタンは、より高い z-index であり、コンテナーの上に自然に積み重ねられているにもかかわらず、回転したコンテナーとボタンが視覚的に重なり合うヒット領域が無視されています。ボタンは回転したコンテナの上にあるように見えますが、その下にあるように動作します。

CSSにLessを使用していることに言及する必要があります（そして、すべてのLessコードは機能します）。

同様の質問をたくさん調べましたが、さまざまな解決策がうまくいきませんでした。機能しなかったもの (ベンダー プレフィックスは省略): translate3d(0px, 0px, 0px); 変換スタイル: フラット;

コードの短いバージョンは次のとおりです。

html:
    <div class="screen snap" style="display: block;">
        <div class="container">**<!-- has perspective set to 1000 -->**
            <div class="cardsContainer"> **<!-- is rotated on x using transform -->**
                <div class="card" style="left: 130px; display: block;">
                    <div class="cardBack"></div>
                    <div class="cardFront" style="opacity: 0;">
                        <div class="cardContent">A piece of fruit.</div>
                    </div>
                </div>
            </div>
            <footer>
                        **<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
                <button class="checkButton">Start</button>
            </footer>
        </div>
    </div>

ここに完全な長さのファイルがあります。アドバイスやヒントをお待ちしております。

.html ファイル:

<div class="screen snap" style="display: block;">
    <div class="container">
        <div class="cardsContainer">
            <div class="card" style="left: 130px; display: block;">
                <div class="cardBack"></div>
                <div class="cardFront" style="opacity: 0;">
                    <div class="cardContent">A piece of fruit.</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: block;">
                <div class="cardBack"></div>
                <div class="cardFront" style="opacity: 0;">
                    <div class="cardContent">Paint</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">Nail</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">Apple</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">House</div>
                </div>
            </div>

        </div>

        <footer>
            <button class="checkButton">Start</button>
        </footer>
    </div>
</div>

.less ファイル:

.screen.snap .container{
    padding: 0;
    margin: 0;
    border: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: baseline;
    background-color: #efe8b6;
    -webkit-perspective:1000px;

    .cardsContainer{
        position:absolute;
        width:800px;
        height:350px;
        top:100px;
        text-align: center;
        background-color: lighten(#efe8b6, 10%);
        -webkit-transform: rotateX(20deg);

        .card {
            position: absolute;
            width:250px;
            height:350px;
            border-radius: 10px;

            .cardFront{
                background-image: url('images/snap_card_front.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;


                .cardContent{
                    width:200px;
                    height:300px;
                    font-size: 37px;
                }
            }

            .cardBack{
                background-image: url('images/snap_card_back.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;
            }
        }
    }
}

footer{
    z-index:999;
    background-color: #f00;
    position: relative;

    .button{
        position:absolute;
        width:50px;
        height:50px;
        background-color: #ccc;
        border-radius: 5px;
        font-size: 25px;
        cursor: pointer;
    }
}
4

1 に答える 1

2

変換の w3 仕様を読み直した後、問題が何であるかを理解しました。

-webkit-パースペクティブ:1000px; DOM のその時点で 3D コンテキストが始まると述べているようです。フッターとcardContainerの両方が含まれるコンテナにパースペクティブスタイルを適用していました。フッターは、DOM 構造のために 3D コンテキストの一部と見なされ、回転された要素の影響を受けていました。

.cardsContainer を別の要素 .cards3dContainer 内に配置するだけで、フッターは 3d コンテキストの一部と見なされなくなりました。これは、パースペクティブ スタイルが設定された dom 構造内にないためです。

新しい構造は次のようになりました。

.screen.snap .container{
    .cards3dContainer{
        -webkit-perspective:1000px;

        .cardsContainer{
                }
     }

     .footer{
     }
}
  • 現時点で回答に取り組んでいる可能性のある人にはお詫び申し上げます。
于 2013-04-05T10:57:02.583 に答える