Die Google-Karte "Flip" und "Wachsen" - Effekt

Beide von die geposteten Antworten hier sind gute generische css-Flossen, aber Sie kümmern sich nicht um den Kern der Frage "wie funktioniert Google tun?". Das problem ist, dass google minimiert und daher verbirgt Ihren code, das macht es schwer zu sagen genau was Los ist, aber mit einem DOM-Inspektor können Sie eine ziemlich einfache Idee. Hier ist die Zusammenfassung:

• Bauen, einen "Klon" div, enthält eine vordere und eine hintere Kind div, ist aber standardmäßig ausgeblendet. Setzen Sie den css-transition-Eigenschaft auf ~.5seconds, so dass jede Bewegung die er macht wird animiert werden.
• Wenn ein Benutzer klickt auf eine Karte, die in das raster, setzen Sie den Klon, so dass es die gleiche position/Abmessungen wie die Karte geklickt, kopieren Sie den Inhalt der angeklickten Karte in der Vorder-Kind-element, und legen Sie es als sichtbar
• Ausblenden der ursprünglichen geklickt Karte mit visibility:hidden
• An dieser Stelle haben Sie nun ein Klon der ursprünglich angeklickten Karte in der gleichen Stelle, aber niemand kann sagen,
• Setzen Sie css für oben, Links, Höhe, Breite der Klon div vorberechnete Abmessungen Zentrierung in den Bildschirm, während auch die Einstellung transform:rotateY() des front - /back-Kinder
• An dieser Stelle scheint es, als ob das div-Element anheben, kippen um, und verschieben/Größenänderung zu der Mitte des Bildschirms. Eine leere Stelle ist Links hinten, da die original-Karte ist noch da, aber die Sichtbarkeit:versteckt ermöglicht es, Raum einzunehmen, ohne sich mit dessen Inhalt
• Einen click-handler ist so eingerichtet, dass, wenn der Benutzer klickt außerhalb des Klon-Karte, oben,Links,Höhe,Breite,transform:rotateY() css ist wieder auf die ursprünglichen Werte, die machen es zu Fliegen, zurück in den Ort.
• Dann der Klon ist wieder versteckt, und die ursprüngliche Karte wird sichtbar gemacht

Demo: http://jsfiddle.net/jwhazel/AaU6v/11/

(Entwickelt in Chrom, müssen einige vendor-Präfixe für andere Browser)

HTML

    <div class="cards">Generic Tile Card</div>

    <div id="cardClone">
        <div id="cloneFront">cardclone front</div>
        <div id="cloneBack">cardclone back</div>
    </div>

CSS

body {
    position: relative;
    font-family:Helvetica, Arial, Sans-serif;
    text-align:center;
}
.cards {
    margin:30px;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
}
img {
    display:block;
    width:80%;
    height:auto;
    margin:0 auto
}
#cardClone {
    position:fixed;
    display:none;
    margin:30px;
    width:200px;
    height:200px;
    -webkit-transition:.6s;
    transition:.6s;
    -webkit-transform-style::preserve-3d;
    transform-style:preserve-3d;
    z-index:99;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
#cloneFront, #cloneBack {
    backface-visibility: hidden;
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transition:.6s;
    transition:.6s;
    overflow:hidden;
}
#cloneFront {
    z-index:100;
    background-color:#59A3FF;
    transform: translatez(0);
}
#cloneBack {
    transform:rotateY(-180deg);
    z-index:101;
    background-color:#aaa;
}

Javascript

//Cache the clone since we have to select it a couple of times
$clone = $('#cardClone');

//Set a global for the card we just clicked so we can track it
$lastelement = "";

//Set up an object for last clicked element so we know where to return to on collapse
lastelement = {
    'top': 0,
        'left': 0,
        'width': 0,
        'height': 0
};

//Set a flag to determine the current flip state of our clone
cloneflipped = false;


//Bind a handler to the clone so we can detect when the transition is done
$('#cardClone').on("transitionend", function (e) {
    if (e.target === e.currentTarget) {
        if (e.originalEvent.propertyName == 'top') {

            //Toggle the clone state
            cloneflipped = !cloneflipped;

            //Detect if our clone has returned to the original position and then hide it
            if (!cloneflipped) {
                $($lastelement).css('opacity', 1);
                $($clone).hide();
            } else {
                //Need to dynamically alter contents of the clone rear AFTER it animates? Do it here
                //$('#cloneBack').html('hi');
            }
        }
    }
});


$(".cards").click(function () {
    if (!cloneflipped) {
        //Cache clicked card
        $lastelement = $(this);

        //Store position of this element for the return trip
        //[hack: subtract 30 due to the margin of .cards in this demo]
        var offset = $lastelement.offset();
        lastelement.top = offset.top - 30 - $(document).scrollTop();
        lastelement.left = offset.left - 30;
        lastelement.width = $lastelement.width();
        lastelement.height = $lastelement.height();

        //BONUS: lets check to see if the clicked card is further to the left or the right of the screen
        //This way we can make the animation rotate inwards toward the center, google doesn't do this
        var rotatefront = "rotateY(180deg)";
        var rotateback = "rotateY(0deg)";
        if ((lastelement.left + lastelement.width / 2) > $(window).width() / 2) {
            rotatefront = "rotateY(-180deg)";
            rotateback = "rotateY(-360deg)";
        }


        //Copy contents of the clicked card into the clones front card
        $clone.find('#cloneFront').html($lastelement.html());


        //Show the clone on top of the clicked card and hide the clicked card
        //[hack: using opacity for hiding here, visibility:hidden has a weird lag in win chrome]
        $clone.css({
            'display': 'block',
                'top': lastelement.top,
                'left': lastelement.left
        });
        $lastelement.css('opacity', 0);

        //Need to dynamically alter contents of the clone rear BEFORE it animates? Do it here
        //$('#cloneBack').html('hi');

        //Flip the card while centering it in the screen
        //[hack: we have to wait for the clone to finish drawing before calling the transform so we put it in a 100 millisecond settimeout callback]
        setTimeout(function () {
            $clone.css({
                'top': '40px',
                    'left': '40px',
                    'height': '400px',
                    'width': $(document).width() - 140 + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': rotatefront
            });
            $clone.find('#cloneBack').css({
                'transform': rotateback
            });
        }, 100);
    } else {
        $('body').click();
    }
});


//If user clicks outside of the flipped card, return to default state
$('body').click(function (e) {
    if (cloneflipped) {
        if (e.target === e.currentTarget) {
            //Reverse the animation
            $clone.css({
                'top': lastelement.top + 'px',
                    'left': lastelement.left + 'px',
                    'height': lastelement.height + 'px',
                    'width': lastelement.width + 'px'
            });
            $clone.find('#cloneFront').css({
                'transform': 'rotateY(0deg)'
            });
            $clone.find('#cloneBack').css({
                'transform': 'rotateY(-180deg)'
            });
        }
    }
});

vielleicht mögen Sie diese ein. check out my code mithilfe von keyframes.

https://jsfiddle.net/jariesdev/y7Lz3mm0/

html:

<div id="logo">
    <a>
      <img src="http://fallbacks.carbonads.com/nosvn/fallbacks/2053cd7a29af8f37381467e04521a14e.png">
    </a>    
</div>

css:

#logo {
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
}

#logo a {
  display: inline-block;
}

#logo:hover a {
    animation-name: rotateThis;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function:ease-in-out;
}

@keyframes rotateThis {
    0% { transform:scale(0) rotateY(180deg) translateX(-100%);}
    /*60% { transform:scale(.5) rotateY(90deg) translateX(-50%); }*/
    100% { transform:scale(1) rotateY(360deg) translateX(0);}
}