CSS flip-animation no funciona en Safari
Residencia eneste excelente blog Implementé una animación invertida en una página de una aplicación web en la que estoy trabajando. Al principio usé las clases CSS como se presentan en la parte superior de la publicación del blog, pero desafortunadamente esto no funciona en IE10, así que comencé a usar la clase CSS que se propuso como solución para que funcione en IE10 presentado al final de el blogpost.
Simplifiqué enormemente el ejemplo para esta publicación, pero mi código se ve así
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="flipper.css" rel="stylesheet">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="flip-container" id="flipFrame">
<div class="flipper">
<div class="front">
FRONT CONTENT
<br>
<button onclick="flipFrame()">
Start <b>here</b>
</button>
</div>
<div class="back">
BACK CONTENT
</div>
</div>
</div>
</body>
<script>
function flipFrame(){
document.querySelector("#flipFrame").classList.toggle("hover")
}
</script>
CSS:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Este código funciona perfectamente en Chrome y en Edge. En IE10 funciona, pero no hay animación invertida. Simplemente cambia el div de frente con el div de fondo sin voltear, pero aún así está bien. Sin embargo, en Safari (en Mac OS X y iPhone) no funciona correctamente. Ambos divs son constantemente visibles uno al lado del otro (con el back-div reflejado)
¿Alguien sabe cómo puedo hacer que esta funcionalidad funcione en IE10, así como en Safari en Mac OS X y iPhone?
El fragmento de código se puede encontrar y ejecutar aquí:https://jsfiddle.net/jrwx3L2e/1/