CSS3 - Animation 3D Flip - Transformation IE10-Origin: solution de contournement-3d
Après avoir regardé à travers IE10 blog du développeur j'ai constaté qu'ils ne prennent pas en charge le paramètre conserve-3d.
Ils proposent une solution de contournement, mais je n'arrive pas à le faire fonctionner. Mon exemple ci-dessous fonctionne dans Safari, Chrome et Firefox mais pas IE10. Si quelqu'un pouvait m'aider à y parvenir, je serais très reconnaissant.
Les boîtes doivent tourner autour de l'axe Y au clic pour afficher du texte et une couleur d'arrière-plan verte. Ce n'est pas le cas dans IE10
Mon exemple: http://codepen.io/2ne/pen/zEpge
Une partie du code:
HTML
<div class="flip-wrapper">
<div class="front"></div>
<div class="back">IE10 SUCKS</div>
</div>
CSS
.flip-wrapper {
cursor: pointer;
height: 100%;
-moz-perspective: 1000;
-webkit-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.flip-wrapper .front,
.flip-wrapper .back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.flip-wrapper .back {
background: none repeat scroll 0 0 #298F68;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-wrapper.flipped {
cursor: default;
-webkit-animation: flip 500ms 1;
-moz-animation: flip 500ms 1;
animation: flip 500ms 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
2ne
Je n'arrivais pas non plus à trouver un bon exemple de cela, alors j'ai passé certains beaucoup trop de temps pour faire le mien.
Celui-ci fonctionne sur tous les navigateurs, n'a pas cet étrange 360deg IE flip, et comprend des dispositions pour le contenu statique (qui vit des deux côtés de la carte - dont j'avais besoin pour mettre un 'flip' bouton en haut à droite des deux côtés).
- J'ai testé sur les dernières versions de Chrome, Firefox, Safari, Opera et IE.
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Fonctionne également avec des arrière-plans transparents: http://jsfiddle.net/Tinclon/2ega7yLt/8/
Le css (bien sûr) comprend 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% { } }
Voici un algorithme de retournement beaucoup plus simple, qui fonctionnera également dans IE. https://jsfiddle.net/mff4jzd2/8/
JAVASCRIPT:
var state = 0;
$('.container').on('click',function(){
if(state == 0){
state = 1;
$('.front').addClass('flip-front');
$('.back').addClass('flip-back');
}
else{
state = 0;
$('.front').removeClass('flip-front');
$('.back').removeClass('flip-back');
}
});
CSS:
.container{
width:170px;
height:280px;
display:inline-block;
position:relative;
transform: perspective(400px);
cursor:pointer;
}
.front{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:blue;
transform: perspective(400px) rotateY(0deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:1;
box-shadow: 0 8px 6px -6px black;
}
.back{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:green;
transform: perspective(400px) rotateY(-180deg);
backface-visibility: hidden;
transition: 1.0s;
opacity:0;
box-shadow: 0 8px 6px -6px black;
}
.flip-front{
opacity:0;
transform: perspective(400px) rotateY(180deg);
}
.flip-back{
opacity:1;
transform: perspective(400px) rotateY(0deg);
}
HTML:
<div class="container">
<div class="back"></div>
<div class="front"></div>
</div>
Utilisez un JS déterminant le navigateur ou toute autre méthode pour appliquer des styles CSS à IE uniquement.
Utilisez ensuite le code suivant:
.ie .flip-wrapper:hover .back {
-ms-backface-visibility: visible;
}
.ie .flip-wrapper:hover .front {
visibility: hidden;
}
voici une version très simple de Nicholls
#container {
position: relative;
height:362px;
width: 282px;
margin: 0 auto;
}
#container div {
position:absolute;
left:0;
top:0;
width:242px;
height: 322px;
padding:20px;
background:#463;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
#container:hover div.upper {
-webkit-transform: perspective(800px) rotateY(179.9deg);
-moz-transform: perspective(800px) rotateY(179.9deg);
transform: perspective(800px) rotateY(179.9deg);
}
<div id="container" aria-haspopup="true">
<div class="upper"></div>
</div>
Je n'ai laissé que le flip code.
Btw, super effets Nicholls!
Trouvé la réponse ici . Posté mon propre violon mis à jour ici - c'est le CSS (j'ai inclus les préfixes ms uniquement pour des raisons de concision):
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}
.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}
.card.flipped {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.front {
background: red;
}
.back {
background: #00f;
transform: rotateY( 180deg );
}
.container:hover .card {
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
Voici un gestionnaire de boutons pour le retournement (en plus de l'événement de survol):
$('button').click(function() {
$('.card').toggleClass('flipped');
});
Il est intéressant (et quelque peu troublant) que la réponse pour IE10 bascule de 360 degrés (l'événement de classe et de vol stationnaire dans le CSS). J'enroule toujours ma tête autour de celle-là.
En espérant qu'ils implémenteront bientôt reserve-3d.
Comme le note l'OP, il y a une réponse à la question sur leur blog, mais malheureusement, il ne l'a pas citation :
Remarque La spécification W3C définit une valeur de mot-clé de conserve-3d pour cette propriété, ce qui indique que l'aplatissement n'est pas effectué. Pour le moment, Internet Explorer 10 ne prend pas en charge le mot clé reserve-3d. Vous pouvez contourner ce problème en appliquant manuellement la transformation de l'élément parent à chacun des éléments enfants en plus de la transformation normale de l'élément enfant.
En résumé, comme d'habitude, le navigateur de Microsoft est gravement cassé .
Après enquête, il semble que le moteur d'interpolation soit incomplet ou cassé dans IE10; tout appliquer en termes de transformations matricielles provoque des retournements "aléatoires" lorsque la rotation autour de plusieurs axes est impliquée. La seule méthode d'interpolation matricielle serait de gérer manuellement toutes les interpolations manuellement. De plus, il semble que toute interpolation où un angle droit est impliqué provoquera un retournement "aléatoire" incohérent.
J'ai réussi à interpoler le css requis, cependant (minifié), le code fait des milliers de lignes. Donc, oui, IE peut faire du CSS 3D, si cela ne vous dérange pas de la précompilation et des longs temps d'attente.