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

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度，因此它会落后，而后部元素则被带到前面。

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;