CSS翻頁效果微調

所以，我試圖創建CSS翻頁效果和我在這裏...... 撥弄鏈接：https://jsfiddle.net/Munja/db11mmut/CSS翻頁效果微調

我有兩面，正面和背面。問題是，背面隱藏，直到正面旋轉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; 
 
\t 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>

來源

2015-12-28 Dejan Munjiza