html - 背面可见性不起作用和 perspective() 问题

Question

我正在尝试制作具有正面文本和背面文本的卡片翻转动画。但是，我一直坚持让背景文字出现。

这是 CSS:

body{
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  color: black;
}
.card{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  background-color: red;
  transition: transform 2s ease;
}

.card:hover{
  transform: perspective(2000px) rotateY(180deg);
}

.back{
  transform: rotateY(180deg);
}

.front, .back{
  position: absolute;
  top: 70px;
  left: 30px;
  backface-visibility: hidden;
}

这是 HTML:

<div class="card">
    <span class='front'>Front</span>
    <span class='back'>End</span>
</div>

还有一个关于视角的问题:如果我第一次尝试悬停它不起作用然后它起作用并且有时视角太像这样:

Answer 1

旋转子元素而不是容器将有助于实现您想要的效果。

这是我们在下面的代码片段中所做的:

• 一个容器元素，它是透明的，并具有分配给它的 perspective 属性。在父元素上设置此项会自动将其应用于两个子元素。
• 两个绝对定位的 block 状子元素，其宽度和高度为父容器元素的 100%。这两个元素的 background 都是红色的。它们的 backface-visibility 是隐藏的，这意味着当元素旋转 +/- 180 度时，背面不会显示(因此不会显示文本的镜像外观)。
• 最初，前面的元素没有旋转，后面的元素旋转了 180 度。这使前面的元素保持在顶部并将后面的元素发送到后面。因为backface-visibility，隐藏了后面元素的内容。
• 在悬停容器时，前面的元素旋转 -180 度，因此它向后移动，而后面的元素被带到前面。

关于另一个问题，我无法模拟它，但我相信使用这种方法应该也能解决那个问题。

body {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  color: black;
}
.card {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  perspective: 2000px; /* applies to both children */
}
.back {
  transform: rotateY(180deg); /* originally this is behind */
}
.card:hover .back {
  transform: rotateY(0deg); /* on hover it is brought to front */
}
.card:hover .front {
  transform: rotateY(-180deg); /* on hover front is sent back */
}
.front,
.back {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
  background: red;
  text-align: center;
  line-height: 200px;
  transition: transform 2s ease;
  backface-visibility: hidden;
}

<div class="card">
  <span class='front'>Front</span>
  <span class='back'>End</span>
</div>