CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d soluzione alternativa

Dopo aver esaminato il blog degli sviluppatori di IE10, 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 objective, sarei molto grato.

Le caselle dovrebbero ruotare attorno all’asse Y al clic per mostrare del testo e un colore di sfondo verde. Questo non è il caso di IE10

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

Parte del codice:

HTML

IE10 SUCKS

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

Anche io non riuscivo a trovare un buon esempio di questo ovunque, quindi ho speso un po ‘troppo tempo a farmi da solo.

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

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

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

Modifica: Funziona anche con sfondi trasparenti: http://jsfiddle.net/Tinclon/2ega7yLt/8/

Il css (ovviamente) include gli hack di IE, quindi è un po ‘lungo, ma l’html è abbastanza semplice:

 
FRONT CONTENT
BACK CONTENT
STATIC CONTENT

 $('.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% { } } 

Ecco un algoritmo di flip molto più semplice, che funzionerà 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:

 

Trovato la risposta qui . Ho postato il mio fiddle aggiornato qui – questo è il css (ho incluso i prefissi ms 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 pulsanti per il flipping (oltre all’evento 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 class e del passaggio del mouse nel css). Sto ancora avvolgendo la mia mente su quello.

Speriamo che implementino preserve-3d presto.

ecco una versione molto semplice di Nicholls

ribaltare il rettangolo

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

Ho lasciato solo il codice a fogli mobili.

Btw, grandi effetti Nicholls!

Utilizza un JS determinante 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; } 

Come nota l’OP, c’è una risposta alla domanda sul loro blog, ma purtroppo non ha citato :

Nota La specifica W3C definisce un valore di keyword di preserve-3d per questa proprietà, che indica che l’appiattimento non viene eseguito. Al momento Internet Explorer 10 non supporta la parola chiave preserve-3d. È ansible aggirare questo problema applicando manualmente la trasformazione dell’elemento genitore a ciascuno degli elementi figlio oltre alla normale trasformazione dell’elemento figlio.

In sintesi, come di consueto, il browser di Microsoft è gravemente danneggiato .

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.