webentwicklung-frage-antwort-db.com.de

Flip Card-Effekt für Nicht-Webkit-Browser

Also habe ich nach dem Flipcard-Effekt gesucht. Es gibt eine Reihe von Nice-Beispielen, die gut mit Webkit-Browsern funktionieren. Zum Beispiel:

http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html

Ich habe jedoch keine gefunden, die auch mit Internet Explorer/Firefox funktioniert. Habt ihr vielleicht ein Beispiel, wo ein ähnlicher Flip-Effekt gemacht wird?

javascriptjqueryhtmlhtml5css3
20
dandoen

Das scheint die Rechnung zu passen ...

http://lab.smashup.it/flip/

Quote: _ ​​Flip ist kompatibel mit: Firefox, Chrome/Chromium, Opera, Safari und sogar IE (6,7,8)

Hier ist noch einer...

http://dev.jonraasch.com/quickflip/examples/

http://jonraasch.com/blog/quickflip-2-jquery-plugin

Es gibt kein "Flip" in diesem, aber vielleicht finden Sie dies auf andere Weise hilfreich ...

http://newsup.com/jquery/cycle/browser.html

Dies scheint mächtig zu sein, aber Sie müssen den Flip selbst programmieren ...

https://github.com/heygrady/transform/wiki

23
Sparky

Es gibt -moz-Präfixe, mit denen Sie das erreichen können, was Sie versuchen.

Siehe hier: http://css3playground.com/flip-card.php

Fügen Sie -moz-Varianten aller -webkit-Zauber hier hinzu: http://jsfiddle.net/nicooprat/GDdtS/

Oder ... wenn Sie Compass ( http://compass-style.org ) und Sass (sass-lang.com) wie ich verwenden, funktioniert dies gut in Chrome, Safari und FF.

HTML

<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front
        </div> 
        <div class="face back"> 
            Back
        </div> 
    </div> 
</div>

Das

SASS mit Kompass-Mixins

( http://compass-style.org/reference/compass/css3/transform/ )

.flip
  position: relative
  +perspective(800)
  width: 80%
  height: 200px

.flip .card.flipped
  +transform(rotatex(-180deg))

.flip .card
  +transform-style(preserve-3d)
  +transition(0.5s)
  width: 100%
  height: 100%

.flip .card .face
  position: absolute
  z-index: 2
  +backface-visibility(hidden) 
  width: 100%
  height: 100%

.flip .card .front
  position: absolute
  z-index: 1

.flip .card .back
  +transform(rotatex(-180deg))

// Make it at least functional IE
.flip .card.flipped .back
  z-index: 0
6
Adam Fraser

Lesen Sie diesen Blogeintrag von David Walsh: http://davidwalsh.name/css-flip

Es gibt einen großartigen Code zum Erstellen eines Flip-Effekts, der auf mehreren Browsern funktioniert.

4
Barlow Tucker

Ich konnte auch nirgendwo ein gutes Beispiel dafür finden, also verbrachte ich es etwas viel zu viel Zeit, meine eigene zu machen.

Dieser funktioniert auf allen Browsern, hat nicht das seltsame 360deg IE Flip und enthält statische Inhalte (die auf beiden Seiten der Karte leben), die ich mit einem 'Flip'-Button anbringen musste rechts oben auf beiden Seiten).

- Ich habe die neuesten Versionen von Chrome, Firefox, Safari, Opera und IE getestet.

http://jsfiddle.net/Tinclon/2ega7yLt/7/

Bearbeiten: Funktioniert auch mit transparenten Hintergründen: http://jsfiddle.net/Tinclon/2ega7yLt/8/

Die CSS (natürlich) enthält IE Hacks, also ist es ein bisschen lang, aber das HTML ist ziemlich unkompliziert:

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>


$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));


.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }
4
Tinclon

Ich habe versucht, diese http://blog.guilhemmarty.com/flippy/ zu verwenden. Sie können es versuchen.

0
jeswang