Question

我遇到了一些麻烦。我正在尝试创建一个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>

Answer 1

您需要：backface-visibility: hidden;

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

修改：您需要将该样式应用于.back

编辑：它拼错了。检查你的拼写

css 2-d框翻转的问题

1 个答案: