Hi everyone !
I'm working on a website for a company, and I need to flip an image to make another appear. So I did a CSS with JS code, and the flip animation works fine on Firefox or Chrome, but not on IE. I'm on IE version 11.0.9600.
Here is the CSS code for flip animation :
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* flip the pane when hovered */
.flip-container:hover .back {
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.flip-container:hover .front {
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100%;
height: 100%;
-ms-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
;
}
/* hide back of pane during swap */
.front, .back {
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: 1s;
transform-style: preserve-3d;
;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform:rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
Thank you !
Flip on IE 11
