背面可见性不起作用和透视（）问题

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

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

这是我们在下面的 sn-p 中所做的：

• 一个透明的容器元素，并分配有perspective 属性。在父元素上设置此项会自动将其应用于两个子元素。
• 两个绝对定位的块子元素具有父容器元素的 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>