CSS翻转效果微调

Question

所以，我试图用 css 创建翻转效果，现在我... fiddle link: 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 class，这是一个工作示例

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

CSS翻转效果微调

CSS Flip effect fine tuning

html

css

css-transitions

css-transforms

css-animations