背面可见性问题：隐藏；答案

【问题标题】：issue with backface-visibility:hidden;背面可见性问题：隐藏；
【发布时间】：2019-11-06 03:32:44
【问题描述】：

我是一个初学者，并试图让卡片在悬停时翻转（以在悬停时显示卡片的背面），我在 YouTube 上关注了几个视频。我有点了解如何做到这一点，但我无法让 backface-visibility:hidden 正常工作。

这是我的 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 不见了。我不知道为什么，请帮忙！

【问题讨论】：

请同时发布您的 HTML
对不起，我也添加了 HTML。谢谢。

标签： html css

【解决方案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/

使用 backface-visibility: visible 使标题的翻转可见

如果它按您的需要工作，请告诉我

【讨论】：

我使用了简单的样式类，并在内容类上应用了带有隐藏背面的悬停功能，这在上述问题中没有早期工作，基本上我已经简化而没有错误，以便实现所需的功能跨度>
如果我们让 backface-visibility: visible;然后它会根据需要翻转

【解决方案2】：

我已经弄清楚问题出在哪里，如果有人想知道，这里是答案......

backface-visibility:hidden 必须放在卡片的背面，在我的例子中是 card__back

这是 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 (sass)

.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 在卡片正面翻转后会以某种方式产生一点停顿，而背面会突然弹出。如果有人知道为什么会这样，我很想知道。

不管怎样，谢谢大家的帮助！

【讨论】：