Just wanted to try out a simple css flip. This was also my first time using Bourbon, but it certainly will not be my last. I will use it on all future projects.
A Pen by Mandy Thomson on CodePen.
Created
May 1, 2014 02:29
-
-
Save anonymous/11443382 to your computer and use it in GitHub Desktop.
A Pen by Mandy Thomson.
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
| <link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'> | |
| <body> | |
| <div class="container"> | |
| <div class="card"> | |
| <div class="front"> | |
| <p>Here is the front side of the card. If you hover over me, I will flip to the backside of the card. </p> | |
| </div> | |
| <div class="back"> | |
| <p>This is the back of the card. This is what you see when you are hovered over the card.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
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
| @import "compass"; | |
| $blue: #33ACB5; | |
| $white: #F1F1F1; | |
| $black: #3B3B3D; | |
| $pink: #D338AE; | |
| $green: #63D457; | |
| $font: 'Prosto One', cursive; | |
| body{ | |
| font-family: $font; | |
| font-size: 17px; | |
| background: $black; | |
| padding-left: 1%; | |
| } | |
| .container{ | |
| @include perspective(1000); | |
| width: 50%; | |
| margin: 20%; | |
| display: inline-block; | |
| &:hover .card{ | |
| cursor:pointer; | |
| @include transform (rotateY(180deg)); | |
| } | |
| } | |
| .card{ | |
| @include transition-duration(1s); | |
| @include transition-timing-function(ease); | |
| @include transform-style(preserve-3d); | |
| position: relative; | |
| p{ | |
| padding: 30% | |
| 10%; | |
| } | |
| } | |
| /* hide back of pane during swap */ | |
| .front, .back { | |
| @include backface-visibility(hidden); | |
| position: absolute; | |
| } | |
| /* front pane, placed above back */ | |
| .front { | |
| z-index: 2; | |
| background: $blue; | |
| color: $white; | |
| } | |
| /* back, initially hidden pane */ | |
| .back { | |
| @include transform (rotateY(180deg)); | |
| background: $white; | |
| color: $black; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment