Created
May 9, 2013 19:45
-
-
Save smockle/5550032 to your computer and use it in GitHub Desktop.
Flip demonstrates a flip animation using CSS. Tested in Google Chrome 26, IE 10, and Firefox Nightly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.