Предотвращение поклонения в CSS3 и анимации флип jQuery

Question

Я объединяя флип-анимацию CSS3 с некоторой анимационной анимацией jQuery. Я стараюсь, чтобы div flip и увеличился, чтобы показать обратный контент при первом щелчке, а затем щелкнуть и сжать второй щелчок. Проблема в том, что я получаю поклоны, которые я надеюсь избежать. Я замедлил анимацию, так что проблема поклонения более очевидна.

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;