Menu
Based on this excellent blogpost I implemented a flip-animation on a page of a web-application I am working on. At first I used the CSS-classes as presented in the top of the blogpost but unfortunately this doesn't work in IE10 so I started using the CSS-class that was proposed as a solution to get it working in IE10 presented at the end of the blogpost.
I simplified the example tremendously for this post but my code looks like this
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);
}
This code works perfectly in Chrome and in Edge. On IE10 it works but there is no flip-animation. It just switches the front-div with the back-div without flipping but that's still OK. In Safari (on Mac OS X and iPhone), however, it is not working correctly. Both of the divs are constantly visible next to each other (with the back-div being mirrored)
Does anyone know how I can get this functionality to work in IE10 as well as in Safari on Mac OS X and iPhone?
The code snippet can be found and executed here: https://jsfiddle.net/jrwx3L2e/1/
671
You need to prefix backface-visibility for Safari according to Can I use, even for the newest version 9.1 at the time of writing.
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Updated Example
document.getElementById("myBtn").addEventListener("click", function() {
document.querySelector("#flipFrame").classList.toggle("hover")
});/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container.hover .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container.hover .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}<div class="flip-container" id="flipFrame">
<div class="flipper">
<div class="front">
FRONT CONTENT
<br>
<button id="myBtn" onclick="flipFrame()">
Start <b>here</b>
</button>
</div>
<div class="back">
BACK CONTENT
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
