CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Question

Dopo aver esaminato IE10's developer blog, ho scoperto che non supportano l'impostazione preserve-3d.

Offrono una soluzione alternativa, ma non riesco a farlo funzionare. Il mio esempio qui sotto funziona con Safari, Chrome e Firefox ma non con IE10. Se qualcuno potesse aiutarmi a raggiungere questo obiettivo, sarei molto grato.

Le caselle devono ruotare attorno all'asse Y al clic per visualizzare un testo e uno sfondo verde. Questo non è il caso in IE10

Il mio esempio:http://codepen.io/2ne/pen/zEpge

parte di codice:

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

01.235.164,106 mila

Answer 1

Trovato la risposta here. Pubblicato il mio violino aggiornato here - questo è il css (ho incluso ms prefissi solo per brevità):

.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); 
} 

ecco un gestore di pulsante per lanciare (in aggiunta alla manifestazione hover):

$('button').click(function() { 
    $('.card').toggleClass('flipped'); 
}); 

Interessante (e alquanto problematico) che la risposta per IE10 si inverta di 360 gradi (l'evento "capovolto" della classe e del passaggio del mouse nel css). Sto ancora avvolgendo la mia mente su quello.

Ecco sperando che implementino presto preserve-3d.

Answer 2

Come osserva OP, non v'è una risposta alla domanda sul loro blog, ma purtroppo non lo fece quote:

Nota La specifica W3C definisce un valore della parola chiave di preservare-3d per questa proprietà, che indica che l'appiattimento non viene eseguito. Al momento Internet Explorer 10 non supporta la parola chiave preserve-3d. È possibile aggirare il problema applicando manualmente applicando manualmente la trasformazione dell'elemento principale a ciascuno degli elementi figlio in aggiunta alla normale trasformazione dell'elemento figlio.

In sintesi, come di consueto, il browser di Microsoft è male rotto.

Su ulteriori indagini, sembra che il motore di interpolazione sia incompleto o rotto in IE10; applicando tutto in termini di trasformazioni a matrice, si verificano lanci "casuali" quando è coinvolta la rotazione su più di un asse. L'unico metodo di interpolazione matriciale consiste nel gestire manualmente tutta l'interpolazione manualmente. Inoltre, sembra che qualsiasi interpolazione in cui è coinvolto un angolo retto causerà il ribaltamento "casuale" incoerente.

Sono riuscito a interpolare il css richiesto, tuttavia (minificato), il codice è lungo migliaia di righe. Quindi, sì, IE può fare css 3d, se non ti dispiace pre-compilazione e lunghi tempi di attesa.

Answer 3

Ecco una versione molto semplice di Nicholls

flipping rectangle

#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> 

ho lasciato solo il codice a fogli mobili.

Btw, grandi effetti Nicholls!

Answer 4

Anche io non riuscivo a trovare un buon esempio di questo ovunque, quindi ho speso un po 'di tempo in modo da guadagnare il mio stesso .

Questo funziona su tutti i browser, non ha quel bizzarro flip 360 gradi IE, e include la disposizione per il contenuto statico (che vive su entrambi i lati della carta - che avevo bisogno di mettere un pulsante "flip" in alto a destra di entrambi i lati).

- Ho provato le ultime versioni di Chrome, Firefox, Safari, Opera e IE.

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

Edit: funziona anche con sfondi trasparenti: http://jsfiddle.net/Tinclon/2ega7yLt/8/

il CSS (ovviamente) comprende hack IE, quindi è un po 'lungo, ma il codice HTML è abbastanza semplice:

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

Answer 5

Utilizzare un JS di determinazione del browser o qualsiasi altro metodo per applicare gli stili CSS solo a IE.

quindi utilizzare il seguente codice:

.ie .flip-wrapper:hover .back { 
    -ms-backface-visibility: visible; 
} 

.ie .flip-wrapper:hover .front { 
    visibility: hidden; 
} 

Answer 6

Ecco un algoritmo a fogli mobili molto più semplice, che funziona anche in 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>