背面可见性不起作用和 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 属性。在父元素上设置它会自动将其应用于两个子元素。
两个绝对定位的块状子元素，其宽度和高度为父容器元素的 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>

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

backface-visibility doesn't work and perspective() issue

html

css

css-transitions

css-transforms