CSS Flip效果微调

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/