CSS3 – Animação 3D Flip – IE10 transform-origin: preserve-3d workaround

Depois de olhar pelo blog de desenvolvedores do IE10, descobri que eles não suportam a configuração preserve-3d.

Eles oferecem uma solução alternativa, mas não consigo fazê-lo funcionar. Meu exemplo abaixo funciona no Safari, Chrome e Firefox, mas não no IE10. Se alguém pudesse me ajudar a conseguir isso, ficaria muito grato.

As checkboxs devem girar em torno do eixo Y ao clicar para mostrar algum texto e uma cor de fundo verde. Este não é o caso no IE10

Meu exemplo: http://codepen.io/2ne/pen/zEpge

Parte do código:

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

Eu também não conseguia encontrar um bom exemplo disso em qualquer lugar, então passei um tempo demais fazendo o meu próprio.

Este funciona em todos os navegadores, não tem aquele estranho IE de 360 ​​graus e inclui provisão para conteúdo estático (que mora nos dois lados do cartão – que eu precisava colocar um botão de ‘flip’ no canto superior direito de ambos os lados) .

–Eu testei em versões mais recentes do Chrome, Firefox, Safari, Opera e IE.

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

Edit: Também funciona com fundos transparentes: http://jsfiddle.net/Tinclon/2ega7yLt/8/

O css (claro) inclui o IE hacks, então é um pouco longo, mas o html é bem direto:

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

Aqui está um algoritmo flip muito mais simples, que também funcionará no 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:

 

Encontrei a resposta aqui . Postado meu próprio violino atualizado aqui – este é o css (eu incluí prefixos ms apenas por brevidade):

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

Aqui está um manipulador de botão para lançar (além do evento de foco):

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

Interessante (e um pouco preocupante) que a resposta para o IE10 está invertendo em 360 graus (a class ‘invertida’ e o evento hover no css). Ainda envolvendo minha cabeça em torno daquele.

Aqui está esperando que eles implementem preservar-3d em breve.

Aqui está uma versão muito simples de Nicholls

invertendo o retângulo

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

Eu deixei apenas o código flip.

Btw, ótimos efeitos Nicholls!

Use um JS de determinador de navegador ou qualquer outro método para aplicar estilos CSS apenas ao IE.

Em seguida, use o seguinte código:

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

Como o OP observa, há uma resposta para a pergunta em seu blog, mas infelizmente ele não citou :

Nota A especificação W3C define um valor de palavra-chave de preserve-3d para essa propriedade, que indica que o nivelamento não é executado. No momento, o Internet Explorer 10 não oferece suporte à palavra-chave preserve-3d. Você pode contornar isso aplicando manualmente a transformação do elemento pai a cada um dos elementos filho além da transformação normal do elemento filho.

Em resumo, como de costume, o navegador da Microsoft está mal quebrado .

Em investigações posteriores, parece que o mecanismo de interpolação está incompleto ou quebrado no IE10; aplicar tudo em termos de transformações matriciais faz com que as inversões “aleatórias” ocorram quando a rotação em torno de mais de um eixo está envolvida. O único método de interpolação de matriz seria manipular manualmente toda a interpolação manualmente. Além disso, parece que qualquer interpolação em que um ângulo reto está envolvido causará uma inversão aleatória inconsistente.

Eu consegui interpolar o css necessário, no entanto (minificado), o código é milhares de linhas longas. Então, sim, o IE pode fazer 3d css, se você não se importar com pré-compilation e longos tempos de espera.