html - CSS 2-D Box Fliping的问题

我在使用某些CSS时遇到了麻烦。我正在尝试创建一个CSS翻转效果。我现在所拥有的，不会显示我卡的前台服务所拥有的。只有后面。因此，基本上，一张卡片可以翻转180度，但不能正确更改。有人可以帮我看看吗？我将不胜感激！

这是我的HTML

.flip3D {
  width: 240px;
  height: 200px;
  margin: 10px;
  float: left;
}
.flip3D > .front {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
  background: black;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visiblity: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3D > .back {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(180deg);
  transform: perspective(600px) rotateY(180deg);
  background: blue;
  width: 240px;
  height: 200px;
  border-radius: 7px;
  -webkit-backface-visiblity: hidden;
  backface-visiblity: hidden;
  transition: -webkit-transform .5s linear 0s;
  transition: transform .5s linear 0s;
}
.flip3D:hover > .front {
  -webkit-transform: perspective(600px) rotateY(-180deg);
  transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover > .back {
  -webkit-transform: perspective(600px) rotateY(0deg);
  transform: perspective(600px) rotateY(0deg);
}

<div class="flip3D">
  <div class="front">Box1 - Front</div>
  <div class="back">Box1 - Back</div>
</div>
<div class="flip3D">
  <div class="front">Box2 - Front</div>
  <div class="back">Box2 - Back</div>
</div>
<div class="flip3D">
  <div class="front">Box3 - Front</div>
  <div class="back">Box3 - Back</div>
</div>

最佳答案

您需要此：backface-visibility: hidden;


  backface-visibility属性定义当不面对屏幕时元素是否应该可见。 http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp


编辑：您需要将该样式应用于.back

编辑：拼写错误。检查您的拼写

关于html - CSS 2-D Box Fliping的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29374770/