Question

我试图制作一组翻转的div ......有点像翻看记事卡。

似乎当我徘徊时，它翻转并变白，因为我没有显示。我不知道如何让另一个（.back）显示出来。

这是我创造的小提琴 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);
}

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

1 个答案: