CSS翻转效果微调

Question

所以，我试图用css创建翻转效果，现在我…fiddle链接：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

您必须从front类中删除transform: rotateY(0deg);和z-index，下面是一个工作示例

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