html - 尝试通过使用转换来翻转一个 div 并显示另一个 div 来模拟卡片翻转

Question

我正在尝试制作一组​​可以翻转的 div……有点像翻转记事卡。

似乎当我悬停时，它会翻转并变成白色，因为我没有显示任何内容。我不知道如何让另一个 (.back) 显示。

这是我创建的 fiddle https://jsfiddle.net/q2ukg0cz/

很简单:

 <div class="flip-card">
   <div class=front">Hello</div>
   <div class="back">World</div>
 </div>

我不确定在这种情况下我做错了什么。

div.flip-card {
  display: block;
  width: 200px;
  height: 200px;
  -webkit-perspective: 600px;
  perspective: 600px;
}
div.flip-card > div.front,
div.flip-card > div.back {
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 1em;
  border: 1px solid #000;
  color: #fff;
  font-size: 3em;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.4);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
div.flip-card > div.front {
  background: #888;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
  transform: rotateY(0deg) rotateX(0deg);
}
div.flip-card > div.back {
  background: #444;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
div.flip-card > div.front:hover {
  background: #444;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
div.flip-card > div.back:hover {
  background: #888;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

Answer 1

问题是你的选择器触发触发器
jsFiddle

试试这个

div.flip-card {
  display: block;
  width: 200px;
  height: 200px;
  -webkit-perspective: 600px;
  perspective: 600px;
}

div.flip-card > div.front,
div.flip-card > div.back {
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 1em;
  border: 1px solid #000;
  color: #fff;
  font-size: 3em;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.4);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

div.flip-card > div.front {
  background: #888;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
  transform: rotateY(0deg) rotateX(0deg);
}

div.flip-card > div.back {
  background: #444;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

div.flip-card:hover > div.front {
  background: #444;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

div.flip-card:hover > div.back {
  background: #888;
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}