Comment faire pivoter un élément sans plonger sous la page dans l'espace 3D?

Je tente d'obtenir un effet CSS 3 lorsque, lorsque vous cliquez sur une image dans une banque d'images, celle-ci s'étend à toute la zone disponible et se renverse en même temps.Comment faire pivoter un élément sans plonger sous la page dans l'espace 3D?

La façon dont j'ai pu accomplir ceci était de cloner l'élément et de le positionner absolument sur le dessus de l'original puis de le transformer. Dans le code ci-dessous, l'image clonée est affectée aux classes clone et activated.

Tout va bien.

Cependant, si je pré-flip toutes les images de la série d'images, activées à l'aide flip tout bouton (en ajoutant origflipped classe, qui a rotateY (180 °) maintenant les dos sont affichées) et puis essayez le même effet (développez et tournez maintenantY (0deg) sur le côté avant), l'animation a des effets secondaires inattendus.

Il semble que lorsque la transition rotateY est en cours d'exécution, la moitié de l'image dans l'effet de rotation diminue en dessous de la page dans l'espace 3D, derrière les autres images et hors de vue.

Alors, comment puis-je faire pivoter (0) de rotateY (180deg) sans avoir la moitié de l'image flottant sous d'autres choses?

<html> 
<head> 

<style> 
    #target_area .face { 
     -webkit-backface-visibility: hidden; 
     position: absolute; 
    } 

    #target_area .face img { 
     vertical-align: middle; 
     height: 100%; 
    } 

    #target_area .face.back { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card { 
     float: left; 
     margin-left: 5px; 

     -webkit-transform-style: preserve-3d; 
     -webkit-transition-property: all; 
     -webkit-transition-duration: 1s; 
     -webkit-transition-timing-function: ease-in; 
    } 

    #target_area .card.origshown { 
     -webkit-transition-property: none; 
     visibility: hidden; 
    } 

    #target_area .card.origflipped { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card.clone { 
     float: none; 
     -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 
    } 

    #target_area .card.clone.activated { 
     -webkit-transform: rotateY(180deg); 
    } 

    #target_area .card.clone.origflipped { 
     -webkit-transform: rotateY(180deg); 

    } 

    #target_area .card.clone.origflipped.activated { 
     -webkit-transform: rotateY(0deg); 
    } 
</style> 






<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> 

<script> 

$(document).ready(function() { 

    var ALL_CARDS = [ 
     ['http://twitpic.com/show/thumb/26n3ms', 'http://twitpic.com/show/thumb/26n3mr'], 
     ['http://twitpic.com/show/thumb/26n3ma', 'http://twitpic.com/show/thumb/26n3mq'], 
     ['http://twitpic.com/show/thumb/26n3mb', 'http://twitpic.com/show/thumb/26n3mt'], 
     ['http://twitpic.com/show/thumb/26n3mc', 'http://twitpic.com/show/thumb/26n3mu'], 
     ['http://twitpic.com/show/thumb/26n3md', 'http://twitpic.com/show/thumb/26n3mv'], 
    ]; 

    var width = 100; 

    for (var i = 0; i < ALL_CARDS.length; i++) { 

     $(document.createElement('div')) 
      .addClass("card") 
      .append(
       $('<img src="' + ALL_CARDS[i][0] + '" />') 
        .addClass("face front") 
       ) 
      .append(
       $('<img src="' + ALL_CARDS[i][1] + '" />') 
        .addClass("face back") 
       ) 
      .width(width) 
      .height(width + 10) 
      .appendTo($('#target_area')) 
      .find('img').width('100%').height('100%') 
      ; 
    } 


    $('#target_area .card') 
     .click(function (e) { 
      e.preventDefault(); 

      var original = $(this); 
      var proxy = $(this).clone(); 
      var body = $('body'); 

      original.addClass("origshown"); 

      proxy 
       .css({ 
        'position': 'absolute', 
        'top': this.offsetTop, 
        'left': this.offsetLeft - 5 
       }) 
       .click(function() { 
        original.removeClass("origshown"); 
        $(this).remove(); 
       }) 
       .addClass("clone") 
       .appendTo($('#target_area')) 
       ; 

      var border_width = 10; 

      proxy 
       .css({ 
        'background-color': 'white', 
        'top': border_width, 
        'left': border_width, 
        'height': body.height() - (2 * border_width), 
        'width': body.width() - (2 * border_width), 
        }) 
       .addClass('activated') 
       ; 


     }); 

    $('#flip_all').click(function (e) { 
     e.preventDefault(); 
     $('.card').toggleClass('origflipped'); 
    }); 
}); 

</script> 
</head> 
<body> 

<div id="target_area"></div> 
<input type="button" value="flip all" id="flip_all" /> 

</body> 
</html>

Source

2010-07-19 ʞɔıu

Hmm, ce test fonctionne bien pour moi dans 5.0.375.99 chrome,
http://jsfiddle.net/Fhxb3/

donc je ne suis pas sûr de ce que vous émettez est, ce navigateur utilisez-vous?

aussi, bien que je suis sûr que vous le savez, il est cassé dans completly firefox/ie (mais c'est la cause de votre style en utilisant -webkit

Source

2010-07-19 11:53:43 Hailwood

Je suis en train ce safari 5.0 –

Comment faire pivoter un élément sans plonger sous la page dans l'espace 3D?

Répondre

Questions connexes