0

私は自分のポートフォリオに取り組んでいます。Androidアプリを表示するためにフリッピングカードを入れました。誰かがそれらにカーソルを合わせると、フリップしてズームインし、簡単な説明が表示されます。

私が抱えている問題は、ホバーしたときに下のカードが上のカードと重なることです。z-indexを使用しようとしましたが成功しませんでした

これはカードのCSSです

/* Card */
    .card-wrapper {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;

        border: 1px solid #ccc;

        margin: 50px;
        display: inline-block;
        visibility:hidden;
        width:400px;
        height:540px;
        z-index: 2;

    }


        .card-wrapper:hover .flipper, .card-wrapper.hover .flipper {
            -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate(10%, 10%);
            -moz-transform: rotateY(180deg) scale(2,2);
            transform: rotateY(180deg) scale(2,2);
            position: relative;

        }

    .card-wrapper, .front, .back {

    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;
        background-color:#ffffff;
        height:540px;

        position: relative;
        z-index: 2;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        visibility:visible;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        z-index: 2;
    }

    .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
        z-index: 200000000000000000;

    }

そしてこれはHTMLです

<div class="card-wrapper" ontouchstart="this.classList.toggle('hover');">
                <div class="flipper">
                    <div class="front">
                        <!-- front content -->
                        <div class="card">
                            <img src="images/wakey-feature.png" alt="Wakey" width="400px" height="450px">
                            <h2 class="app-title">Wakey</h2>
                        </div>

                    </div>
                    <div class="back">
                        <!-- back content -->
                        <div class="card">
                        </div>
                    </div>
                </div>


                <div class="play-store-card">
                    <a href="https://play.google.com/store/apps/details?id=com.doublep.wakey" target="_blank">
                        <div class="dashed-line">
                            <button class="play-store-button" type="button" style="margin: 0px 0px 0px 0px;">
                                <img src="images/play-store.png">
                            </button>

                        </div>
                    </a>

                </div>
            </div>

この問題を解決するにはどうすればよいですか？

4

1 に答える 1

0

z-indexはそれを助けません、それは他のdivの前にdivを表示しません。

あなたがする必要があるのは本当にそれらを前に置くことです。あなたはすでにホバーで翻訳をしているので、1つの可能性はそれを変更してdivをあなたに近づけることです：

それ以外の

.card-wrapper:hover .flipper, .card-wrapper.hover .flipper {
       -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate(10%, 10%);

そのはず

.card-wrapper:hover .flipper, .card-wrapper.hover .flipper {
  -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate3d(10%, 10%, -100px);

そして、すべての要素で保存3dを設定する必要があります。私はそれをしました：

div {
-webkit-transform-style: preserve-3d;
}

しかし、おそらくあなたはもっと正確になりたいでしょう。とにかく、この2つの変更で、問題なく動作すると思います。（Webkit内）

ちなみに、私はあなたにこれまでに見た中で最も高いz-indexへの価格を与えるでしょう:-)

于 2013-03-26T20:49:21.173 に答える