A Pen by Mandy Thomson.

A-simple-CSS-Card-Flip.markdown

A simple CSS Card Flip

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.

License.

index.html

<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>

style.scss

@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;
}