Effet de la carte à bascule pour les navigateurs non Webkit

Cela semble convenir à la facture …

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

Quote: Flip est compatible avec: Firefox, Chrome / Chromium, Opera, Safari et même IE (6,7,8)

Voici un autre …

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

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

Il n'y a pas de "flip" dans celui-ci, mais peut-être que vous trouverez cela utile d'une autre manière …

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

Celui-ci semble puissant, mais vous devrez programmer le flip vous-même …

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

Il existe des préfixes de -moz qui devraient vous permettre d'accomplir ce que vous essayez de faire.

Voir ici: http://css3playground.com/flip-card.php

Essayez d'ajouter -moz les variantes de la magie -webkit ici: http://jsfiddle.net/nicooprat/GDdtS/

Ou … si vous utilisez Compass ( http://compass-style.org ) et Sass (sass-lang.com) comme moi, cela fonctionne bien dans Chrome, Safari et FF.

HTML

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

SASS avec mélangeurs

( 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 

Découvrez cette publication du blog de David Walsh: http://davidwalsh.name/css-flip

Il a un bon code pour créer un effet flip qui fonctionne sur plusieurs navigateurs.

Je ne semblais pas trouver un bon exemple de cela n'importe où, alors j'ai passé trop de temps à faire le mien.

Celui-ci fonctionne sur tous les navigateurs, n'a pas cette étrange flèche IE 360deg, et inclut une disposition pour le contenu statique (qui vit des deux côtés de la carte – dont je devais mettre un bouton 'flip' en haut à droite des deux côtés) .

– J'ai testé les dernières versions de Chrome, Firefox, Safari, Opera et IE.

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

Edit: Fonctionne également avec des fonds transparents: http://jsfiddle.net/Tinclon/2ega7yLt/8/

Le css (bien sûr) comprend les hacks IE, donc c'est un peu long, mais le html est assez simple:

 <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% { } } 

J'essayais d'utiliser ce http://blog.guilhemmarty.com/flippy/ , vous pouvez essayer.