Question

我是一名初学者，并且尝试使卡在悬停时翻转（在悬停时显示卡的背面），我在YouTube上观看了一些视频。我有点知道如何执行此操作的概念，但是却看不到背面可见性：隐藏起来无法正常工作。

这是我的scss代码：

.card {
perspective: 150rem;
-moz-perspective: 150rem;
height: 400px;
width: 300px;

&:hover &__content {
transform: rotateY(180deg);
}

&__content {
position: relative;
height: 100%;
transition: all 2.5s;
transform-style: preserve-3d;
width: 100%;
}

&__side {
position: absolute;
backface-visibility: hidden; *
height: 100%;
width: 100%;
}

&__front {
background-color: #333;
background: url(../01_card_flip/img/love.jpg) no-repeat center center/cover;

}
&__back {
background-color: pink;
transform: rotateY(180deg);
}
}

这是HTML

<body>
<div class="card">
    <div class="card__content">
        <div class="card__side card__front"></div>
        <div class="card__side card__back">
            <h3>Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>
</div>

当我将backface-visibility：hidden;隐藏时，一切看起来都很正常，但是当我将鼠标悬停在其上方时，我只能看到card__front的背面，但是card__back消失了。而且我不知道为什么，请帮忙！

Answer 1

CSS

.scene {
  width: 300px;
  height: 50px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.content {
  backface-visibility: hidden;
}

.scene:hover .container .content {
  transform: rotateY(180deg);
}

这是HTML

<div class="scene">
  <div class="container">
    <div class="content">
      <h3 class="card">Lorem ipsum dolor sit amet.</h3>
    </div>
  </div>
</div>

作为参考，这里是JSfiddle链接https://jsfiddle.net/h3dke5to/47/

使用背面可见性：可见使标题的翻转可见

请让我知道它是否可以根据您的需要

Answer 2

我已经弄清楚了问题所在，这是万一有人想知道的答案...

背面可见性：必须隐藏在卡片的背面，在我的情况下是卡片__背面

这是HTML

<body>

    <div class="card">
       <div class="card__side card__content">
           <div class="card__front"></div>

           <div class="card__side card__back">
               <h3 class="card__text">Lorem ipsum dolor sit amet.</h3>
           </div>
       </div>
    </div>

</body>

和CSS（无礼）

.card {
    height: 30rem;
    perspective: 150rem;
    -moz-perspective: 150rem;
    width: 20rem;

    &:hover &__content {
        transform: rotateY(-180deg);
    }

    &__content {
        position: relative;
        color: white;
        height: 100%;
        transition: transform 1.5s;
        transform-style: preserve-3d;
        width: 100%;
    }

    &__side {
        position: absolute;
        // backface-visibility: hidden; **THIS WILL NOT WORK ON CHROME**
        left: 0;
        top: 0;
    }

    &__front {
        background: url(../01_card_flip/img/love.jpg) no-repeat center center/cover;
        border-radius: 10px;
        height: 100%;
        width: 100%;
    }

    &__back {
        backface-visibility: hidden; // PLACE IT RIGHT HERE

        border-radius: 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to left top, #7c0a02, #bd574e);
        flex-direction: column;
        height: 100%;
        justify-content: center;
        transform: rotateY(180deg);
        width: 100%;
    }

    &__text {
        font-family: 'amita', cursive;
        font-size: 2rem;
    }
}

我想澄清一件事，对于Edge和Firefox，它可以在card__side内完美运行；但是，在翻转卡的正面后，Chrome会以某种方式稍稍停顿一下，背面会突然弹出。如果有人知道为什么会这样，我很想知道。

无论如何，感谢您的所有帮助！

背面可见性问题：隐藏；

2 个答案: