CSS3-3D Flip Animation-IE10 transform-origin: preserve-3D workaround
après avoir regardé à travers IE10 developer blog j'ai constaté qu'ils ne prennent pas en charge le paramètre preserve-3d.
ils offrent une solution de rechange, mais je ne semble pas pouvoir le faire fonctionner. Mon exemple ci-dessous fonctionne en Safari, Chrome et Firefox mais pas IE10. Si quelqu'un pouvait m'aider à atteindre ce que je serais très reconnaissante.
les boîtes doivent tourner autour de l'axe des Y en cliquant pour afficher du texte et une couleur de fond verte. Ce n'est pas le cas dans IE10
mon exemple: http://codepen.io/2ne/pen/zEpge
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
6 réponses
Je ne pouvais pas trouver un bon exemple de cela nulle part, donc j'ai passé quelque beaucoup trop de temps à faire le mien.
celui - ci fonctionne sur tous les navigateurs, n'a pas que Bizarre 360deg IE flip, et comprend des dispositions pour le contenu statique (qui vit sur les deux côtés de la carte-dont j'avais besoin pour 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 aussi 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% { } }
voici un algorithme de flip 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>
a trouvé la réponse ici . Posté mon propre fiddle mis à jour ici - il s'agit de la css (j'ai inclus les préfixes ms uniquement pour la brièveté):
.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 bouton pour retourner (en plus de l'événement de vol stationnaire):
$('button').click(function() {
$('.card').toggleClass('flipped');
});
intéressant (et quelque peu troublant) que la réponse pour IE10 est de basculer de 360 degrés (la classe "basculé" et l'événement de vol stationnaire dans le css). Toujours enveloppant mon tête autour de cela.
espérons qu'ils implémentent preserve-3d bientôt.
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 code flip.
Btw, grands effets Nicholls !
utilisez un navigateur-déterminez JS ou toute autre méthode pour appliquer CSS-styles à IE seulement.
alors utilisez le code suivant:
.ie .flip-wrapper:hover .back {
-ms-backface-visibility: visible;
}
.ie .flip-wrapper:hover .front {
visibility: hidden;
}
comme le note L'OP, il y a une réponse à la question sur leur blog, mais malheureusement il n'a pas citation :
Note la spécification W3C définit un mot-clé de preserve-3d pour cette propriété, ce qui indique que l'aplatissement n'est pas effectué. Pour le moment, Internet Explorer 10 ne supporte pas le mot-clé preserve-3d. Vous pouvez contourner cela en appliquant manuellement la transformation de l'élément parent à chacun des éléments enfant en plus de la transformation normale de l'élément enfant.
en résumé, comme d'habitude, le navigateur de Microsoft est mal cassé .
lors d'une enquête plus approfondie, il semble que le moteur d'interpolation est incomplet ou cassé dans IE10; l'application de tout en termes de matrices transforme les causes "aléatoires" sauts de régime à se produire lorsque la rotation autour de plus d'un axe est impliquée. Le la seule méthode d'interpolation matricielle serait de traiter toute interpolation manuellement. De plus, il semble que toute interpolation impliquant un angle droit provoquera des retournements "aléatoires" incohérents.
j'ai réussi à interpoler le css requis, cependant (minifié), le code est des milliers de lignes de long. Donc, oui, IE peut faire des css 3d, si cela ne vous dérange pas de pré-compiler et de longs temps d'attente.