防止在CSS3和jQuery翻轉動畫中鞠躬

Question

我將CSS3翻轉動畫和一些jQuery生長動畫組合在一起。我試圖讓一個div翻轉並在第一次點擊時顯示背面內容，然後在第二次點擊時翻轉和縮小。問題是，我正在得到一個我希望能夠避免的低頭影響。我放慢了動畫速度，這樣弓箭問題就更加明顯了。

LINK TO JSFIDDLE

HTML

<div class="container"> 
    <div class="ui-flip"> 
     <div class="flipper"> 
      <div class="ui-flip-front" style="background: green;"><h1>Front</h1></div> 
      <div class="ui-flip-back" style="background: yellow;"><h1>Back</h1></div> 
     </div> 
    </div> 
</div> 

CSS

.container { 
    margin: 0 auto; 
    width: 100px; 
    padding: 100px; 
} 

.ui-flip { 
    position: relative; 
    display: inline-block; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
    perspective: 1000; 
    -moz-transform: perspective(1000px); 
    -moz-transform-style: preserve-3d; 
    } 

    .ui-flip.hover .flipper { 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
    } 

    .ui-flip, .flipper, .ui-flip-front, .ui-flip-back { 
     width: 100%; 
     height: 100%; 
    } 

    .flipper { 
     position: relative; 
     -webkit-transition: 5s; 
     -webkit-transform-style: preserve-3d; 
     -moz-transition: 5s; 
     -moz-transform: perspective(1000px); 
     -moz-transform-style: preserve-3d; 
     transition: 5s; 
     transform-style: preserve-3d; 
    } 

    .ui-flip-front, .ui-flip-back { 
     overflow: hidden; 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     backface-visibility: hidden; 
     -webkit-transition: 5s; 
     -webkit-transform-style: preserve-3d; 
     -moz-transition: 5s; 
     -moz-transform-style: preserve-3d; 
     -ms-transition: 5s; 
     -ms-transform-style: preserve-3d; 
     transition: 5s; 
     transform-style: preserve-3d; 
     top: 0; 
     left: 0; 
    } 

    .ui-flip .ui-flip-front { 
     position: relative; 
     -webkit-transform: rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     transform: rotateY(0deg); 
     z-index: 2; 
    } 

    .ui-flip .ui-flip-back { 
     position: absolute; 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
    } 

JavaScript和jQuery庫

$('.ui-flip').toggle(function() { 
    var topOffset = 0; 
    var rect = this.getBoundingClientRect(); 
    $(this).data('top', rect.top); 
    $(this).data('left', rect.left); 
    $(this).data('width', this.offsetWidth); 
    $(this).data('height', this.offsetHeight); 
    this.classList.add('hover'); 
    $(this).stop().animate({ 
     top: '-' + (rect.top - topOffset) + 'px', 
     left: '-' + rect.left + 'px', 
     width: $(window).width() + 'px', 
     height: $(window).height() - topOffset + 'px' 
    }, 5000, function() { 
     this.style.position = 'fixed'; 
     this.style.width = '100%'; 
     this.style.height = '100%'; 
     this.style.top = 0 + topOffset + 'px'; 
     this.style.left = 0 + 'px'; 
    }); 


}, function() { 
    var rect = this.getBoundingClientRect(); 
    this.classList.remove('hover'); 
    $(this).stop().animate({ 
     top: $(this).data('top') + 'px', 
     left: $(this).data('left') + 'px', 
     width: $(this).data('width') + 'px', 
     height: $(this).data('height') + 'px' 
    }, 5000, function() { 
     this.removeAttribute('style'); 
    }); 
}); 

Answer 1

動畫被裁剪，因爲你「限制」與CSS3的視角選項視窗。 嘗試從CSS中刪除：

.ui-flip { 
     position: relative; 
     display: inline-block; 
     -moz-transform-style: preserve-3d; 
    } 

這裏是一個演示沒有它 - http://jsfiddle.net/uxrhC/2/

Answer 2

你有隱藏的溢出是剪裁的結果。

試試這個：

.ui-flip-front, .ui-flip-back { 
    /* overflow: hidden; */ 
    -webkit-backface-visibility: hidden;