5202

ein Blog über technische Fragen zu Blogger

Flipcard-Kachel nachgebaut

von

Seit Version 10 unterstützt in den dynamischen Ansichten auch der Firefox die 3d Bewegung der Flipcard-Kachel. Bis jetzt war da im Firefox ja nur ein Hintergrundwechsel zu sehen. Um die Funktion besser zu verstehen, habe ich so eine Flipcard-Kachel nachgebaut. Fahrt mit der Mause über das Bild und ihr seht die Drehbewegung.

Demo: Flipcard-Kachel



Markup
<div class="card">
  <div class="front">   
  </div>
  <div class="back">
  </div>
</div>
CSS
.card {
    float: left;
    width: 400px;
    height: 260px;
    margin: 20px;
    position: relative;
    font-size: .8em;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}
    .card .front {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: inherit;
        height: inherit;
        border: 1px solid #ccc;
        text-align: center;
        background: url(http://goo.gl/8MQMG);

        -webkit-transform: rotateY(0deg);
           -moz-transform: rotateY(0deg);
             -o-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
                transform: rotateY(0deg);

        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
             -o-backface-visibility: hidden;
                backface-visibility: hidden;

        /* -- transition-- */
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
             -o-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
    }
    .card .back {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: inherit;
        height: inherit;
        border: 1px solid #ccc;
        background: url(http://goo.gl/fTu2D);
         -webkit-transform: rotateY(-180deg);
           -moz-transform: rotateY(-180deg);
             -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
                transform: rotateY(-180deg);

        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
             -o-transform-style: preserve-3d;
                transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
             -o-backface-visibility: hidden;
                backface-visibility: hidden;

        /* -- transition-- */
        -webkit-transition: all .4s ease-in-out;
           -moz-transition: all .4s ease-in-out;
            -ms-transition: all .4s ease-in-out;
             -o-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
    }
.card:hover .front {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
}
.card:hover .back {
    -webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
         -o-transform: rotateY(0deg);
}

Anmerkung

Funktioniert z.Z. nur in Webkit-Browser richtig. Die 3d Unterstützung für Firefox ist noch buggy.