Question

我正在处理我的portfolio，我已经在其中放了一些翻转卡来显示我的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>

我该如何解决这个问题？

Answer 1

z-index对此没有帮助，它不会让div显示在其他div前面。

你需要做的是真的把它们放在前面。一个可能性，因为你已经在悬停中进行翻译，将改变它以使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指数的价格:-)

在Z轴上重新排列卡

1 个答案: