CSS Card Flip

css-card-flip.markdown

CSS Card Flip

Simple card flip using CSS 3D transforms and transitions

A Pen by Cole Bemis on CodePen.

License.

index.html

<div class="container">
  <div class="card">
    <div class="front">Click to flip</div>
    <div class="back">Yo, what up?</div>
  </div>
</div>

script.js

$('.container').on('click', function () {
  $('.card').toggleClass('flipped');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.stylus

@import "nib"

html, body
  height 100%
  margin 0

body
  background #00A5F7
  display flex 
  flex-direction column
  justify-content center
  align-items center

.container
  width 300px
  height 200px
  position relative  
  perspective 800px
  border-radius 4px

.card
  width 100%
  height 100%
  position absolute
  transform-style preserve-3d
  transition transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  border-radius 6px
  box-shadow 0 6px 16px rgba(0,0,0,0.15)
  cursor pointer

  

  div
    position absolute
    width 100%
    height 100%
    backface-visibility hidden
    border-radius 6px
    background #fff
    display flex
    justify-content center
    align-items center
    font 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif
    font-smoothing antialiased
    color #47525D

  .back
    transform rotateY(180deg)

  &.flipped
    transform rotateY(180deg)