Skip to content

Instantly share code, notes, and snippets.

@jocubeit
Created March 18, 2019 01:51
Show Gist options
  • Save jocubeit/bedfe2aaf444898c6e02dc2afe4f99da to your computer and use it in GitHub Desktop.
Save jocubeit/bedfe2aaf444898c6e02dc2afe4f99da to your computer and use it in GitHub Desktop.
CSS Card Flip
<div class="container">
<div class="card">
<div class="front">Click to flip</div>
<div class="back">Yo, what up?</div>
</div>
</div>
$('.container').on('click', function () {
$('.card').toggleClass('flipped');
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment