CSS：2面3D翻轉重疊/出血

Question

我試圖實現使用兩個面在IE中的3D翻頁效果（無preserve-3d）。看到此CodePen中的示例：http://codepen.io/djskinner/pen/XbdPpj

的問題是，所述兩個面在邊緣處重疊。這個問題出現在Chrome和IE中，所以我認爲我已經轉換這種效果的方式存在問題，因爲IE中缺少preserve-3d。有沒有辦法來防止這種情況發生？

Answer 1

我已通過利用transform-origin屬性，它然後允許簡單的旋轉，而不必執行旋轉和平移實現的效果而沒有任何毛刺。

更新代碼筆可以在這裏找到：http://codepen.io/djskinner/pen/NqNVPx。

啓示這個代碼採取筆：http://codepen.io/jonathan/pen/xiJLn。

Answer 2

這裏是你的codepen的更新，你的原點在哪裏更新，我還添加了一個z-index到你的活動狀態，這樣在懸停你不能在你的3d盒子的底部看到隱藏的div。

希望它有幫助。 http://codepen.io/anon/pen/pJymRP

$('.cube').hover(function(event) { 
 
    $(this).addClass('active'); 
 
    event.preventDefault(); 
 
}, function(event) { 
 
    $(this).removeClass('active'); 
 
    event.preventDefault(); 
 
});

$cube-height: 100px; 
 
$negative-half-cube-height: -0.5*$cube-height; 
 

 
.cube { 
 
    border: 1px solid #000; 
 
    height: $cube-height; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    width: 60%; 
 
    perspective: 1000px; 
 
} 
 

 
// The two faces of the cube 
 
.default-state, 
 
.active-state { 
 
    backface-visibility: visible; 
 
    height: $cube-height; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    transition: transform 1.5s ease; 
 
    transform-origin: center center $negative-half-cube-height; 
 
    -webkit-transform-origin: center center $negative-half-cube-height; 
 
    width: 100%; 
 
} 
 

 
// Position the faces 
 
.default-state { 
 
    background-color: #1d92c9; 
 
    transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
 
} 
 

 
.active-state { 
 
transform:perspective(1000px) rotateX(90deg) rotateY(0deg) rotateZ(0deg); 
 
} 
 
.active { 
 

 
    .default-state { 
 

 
    transform:perspective(1000px) rotateX(-90deg) rotateY(0) rotateZ(0deg); 
 
    } 
 

 
    .active-state { 
 
    z-index:99999; 
 
    transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0); 
 
    } 
 
} 
 

 
/* Demo styling */ 
 
body { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-weight: 400; 
 
    margin: 70px; 
 
    background: #f1f1f1; 
 
} 
 

 
h1 { 
 
    font-size: 20px; 
 
    text-align: center; 
 
    margin-top: 40px; 
 
} 
 

 
.cube { 
 
\t text-align: center; 
 
    \t margin: 0 auto; 
 
} 
 

 
.default-state, .active-state { 
 
    background: #2ecc71; 
 
    
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    line-height: $cube-height; 
 
} 
 

 
.active-state { 
 
    background: darken(#2ecc71, 7%); 
 
} 
 

 
#flipto { 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-top: 20px; 
 
    color: #ccc; 
 
}

<h1>3D FLIP IN IE</h1> 
 

 
<div class="cube"> 
 
\t <div class="active-state"> 
 
    \t \t <span>...and I flip</span> 
 
    \t </div> 
 
    <div class="default-state"> 
 
\t \t  <span>Hover</span> 
 
\t </div> 
 

 
</div>