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 前面。

你需要做的是真正把它们放在前面。由于您已经在悬停中进行了翻译，因此一种可能性是更改它以使 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 回答