Question

所以，我试图用css创建翻转效果，我在这里...... 小提琴链接 ：https://jsfiddle.net/Munja/db11mmut/

我有两面，正面和背面。问题是，背面被隐藏，直到前侧旋转180度。我想避免这种情况，并在正面旋转过程中使背面部分可见，以便产生精细的翻转效果。

有什么建议吗？提前谢谢！

代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
}
.container:hover .el{ 
 transform: rotateY(180deg);
}
.el {
  position: relative;
  display: block;
  width: 100%;
  height: 120%;
  background: #eee;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  float: left;
  background: lightgreen;
  backgace-visibility: hidden;
  z-index: 2;
	transform: rotateY(0deg);
}
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  float: left;
  background: lightblue;
  backgace-visibility: hidden;
  transform: rotateY(180deg);
}

<div class="container">
  <div class="el">
    <div class="front">
      Front Side
    </div>
    <div class="back">
      Back Side
    </div>
  </div>
</div>

Answer 1

你必须从前班删除transform: rotateY(0deg);和z-index，这是一个有效的例子

https://jsfiddle.net/db11mmut/2/

CSS Flip效果微调

1 个答案: