Effet carte retournée pour les navigateurs non-webkit
Je cherchais donc l'effet de la carte retournée. Il existe un certain nombre d’exemples de Nice qui fonctionnent bien avec les navigateurs Webkit. Par exemple:
http://www.ilovecolors.com.ar/wp-content/uploads/css-card-flip-webkit/click.html
Mais j’en ai trouvé aucun qui fonctionne aussi bien avec Internet Explorer/Firefox. Avez-vous les gars peut-être un exemple où un effet similaire est fait?
Cela semble correspondre à la facture ...
Quote: _ Flip est compatible avec: Firefox, Chrome/Chrome, Opera, Safari et même IE (6,7,8)
En voici un autre ...
http://dev.jonraasch.com/quickflip/examples/
http://jonraasch.com/blog/quickflip-2-jquery-plugin
Il n'y a pas de "retournement" dans celui-ci, mais vous trouverez peut-être cela utile d'une autre manière ...
http://malsup.com/jquery/cycle/browser.html
Celui-ci semble puissant, mais vous devrez programmer vous-même le retournement ...
Il existe des préfixes -moz qui devraient vous permettre d'accomplir ce que vous essayez de faire.
Voir ici: http://css3playground.com/flip-card.php
Essayez d’ajouter des variantes -moz de toute 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 parfaitement sous 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>
Le plus grand centre commercial
SASS avec boussole
( 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 ce billet de blog de David Walsh: http://davidwalsh.name/css-flip
Il contient un excellent code pour créer un effet de retournement qui fonctionne sur plusieurs navigateurs.
Je ne parvenais pas non plus à trouver un bon exemple de cette situation, alors j’ai passé certains beaucoup trop de temps à faire le mien.
Celui-ci fonctionne sur tous les navigateurs, n'a pas cette étrange 360deg IE - retournement, et inclut une disposition pour le contenu statique (qui vit des deux côtés de la carte - pour lequel je devais mettre un bouton "inverser" à la 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) inclut IE hacks, 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 ceci http://blog.guilhemmarty.com/flippy/ , vous pouvez essayer.