Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flip demonstrates a flip animation using CSS. Tested in Google Chrome 26, IE 10, and Firefox Nightly.
/* entire container, keeps perspective */
body .flip-container {
width: 100%;
}
body .flip-container .flipper {
position: relative;
}
/* hide back of pane during swap */
body .flip-container .flipper .front,
body .flip-container .flipper .back {
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(1000px) rotateY(180deg);
-moz-transform: perspective(1000px) rotateY(180deg);
-o-transform: perspective(1000px) rotateY(180deg);
transform: perspective(1000px) rotateY(180deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
/* front pane, placed above back */
body .flip-container .flipper .front {
z-index: 2;
-webkit-transform: perspective(1000px) rotateY(0);
-moz-transform: perspective(1000px) rotateY(0);
-o-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
/* front pane, placed above back */
body .flip-container:hover .flipper .front {
-webkit-transform: perspective(1000px) rotateY(-179.9deg);
-moz-transform: perspective(1000px) rotateY(-179.9deg);
-o-transform: perspective(1000px) rotateY(-179.9deg);
transform: perspective(1000px) rotateY(-179.9deg);
}
/* back, initially hidden pane */
body .flip-container:hover .flipper .back {
-webkit-transform: perspective(1000px) rotateY(0);
-moz-transform: perspective(1000px) rotateY(0);
-o-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
body {
/* entire container, keeps perspective */
.flip-container {
width: 100%;
.flipper {
position: relative;
/* hide back of pane during swap */
.front, .back {
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(1000px) rotateY(180deg);
-moz-transform: perspective(1000px) rotateY(180deg);
-o-transform: perspective(1000px) rotateY(180deg);
transform: perspective(1000px) rotateY(180deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
/* front pane, placed above back */
.front {
z-index: 2;
-webkit-transform: perspective(1000px) rotateY(0);
-moz-transform: perspective(1000px) rotateY(0);
-o-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
}
/* flip the pane when hovered */
&:hover .flipper {
/* front pane, placed above back */
.front {
-webkit-transform: perspective(1000px) rotateY(-179.9deg);
-moz-transform: perspective(1000px) rotateY(-179.9deg);
-o-transform: perspective(1000px) rotateY(-179.9deg);
transform: perspective(1000px) rotateY(-179.9deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform: perspective(1000px) rotateY(0);
-moz-transform: perspective(1000px) rotateY(0);
-o-transform: perspective(1000px) rotateY(0);
transform: perspective(1000px) rotateY(0);
}
}
}
}
@ITAndy23

This comment has been minimized.

Copy link

@ITAndy23 ITAndy23 commented Jul 26, 2017

In IE11, no errors, sometimes the card flips and sometimes it doesn't. When it doesn't, .6s later it shows the back of the card, but doesn't show the rotation animation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.