A simple css based card flip animation. Just click on one of the cards!
Created
January 30, 2014 20:25
-
-
Save sync101/8718023 to your computer and use it in GitHub Desktop.
A Pen by sync101.
This file contains 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
<div class="wrapper"> | |
<h1 class="pageTitle">Card flip</h1> | |
<p>A simple css based card flip animation. Just click on one of the cards!</p> | |
</div> | |
<div class="wrapper cards"> | |
<div class="container"> | |
<div class="card"> | |
<div class="front"><h2>Front</h2></div> | |
<div class="back"><h2>Back</h2></div> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="card"> | |
<div class="front"><h2>Front</h2></div> | |
<div class="back form"> | |
<div class="content"> | |
<h3 class="cardTitle">Send a mail!</h3> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales, mi ac vulputate blandit, libero nulla bibendum quam.</p> | |
<form> | |
<div class="formItem"> | |
<label>Naam</label> | |
<input type="text" name="Naam" value="Naam" /> | |
</div> | |
<div class="formItem"> | |
<label>Email</label> | |
<input type="password" name="Password" value="Password" /> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains 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
$('.card').click(function(){ | |
$(this).toggleClass('flipped'); | |
}); |
This file contains 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 url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700); | |
body { | |
font-family: 'Roboto Slab', serif; | |
font-weight: 300; | |
font-size: 16px; | |
line-height: 1.4em; | |
color: #333; | |
background: #eee; | |
} | |
input { | |
font-family: 'Roboto Slab', serif; | |
font-weight: 300; | |
font-size: 16px; | |
border: 0; | |
padding: 3px 5px; | |
border-radius: 3px; | |
} | |
h1 { | |
margin: 0.5em 0 1em 0; | |
font-size: 1.8em; | |
font-weight: 700; | |
color: #096AA3; | |
} | |
h2, h3 { | |
font-weight: bold; | |
} | |
p { | |
margin-bottom: 1em; | |
} | |
.animation { | |
-webkit-transition: all 0.3s ease; | |
-moz-transition: all 0.3s ease; | |
-ms-transition: all 0.3s ease; | |
-o-transition: all 0.3s ease; | |
transition: all 0.3s ease; | |
} | |
.wrapper { | |
width: 80%; | |
padding: 4%; | |
margin: 20px auto; | |
background: #fff; | |
} | |
.wrapper.cards { | |
background: 0; | |
width: 88%; | |
padding: 20px 0 0 0; | |
} | |
.container { | |
position: relative; | |
float: left; | |
width: 48%; | |
height: 260px; | |
margin: 10px 0 10px 4%; | |
background: #fff; | |
/* Set the depth of the elements */ | |
-webkit-perspective: 800px; | |
-moz-perspective: 800px; | |
-o-perspective: 800px; | |
perspective: 800px; | |
} | |
.container:first-child { | |
margin-left: 0; | |
} | |
.card { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
cursor: pointer; | |
/* Set the transition effects */ | |
-webkit-transition: -webkit-transform 0.4s; | |
-moz-transition: -moz-transform 0.4s; | |
-o-transition: -o-transform 0.4s; | |
transition: transform 0.4s; | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
-o-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
} | |
.card.flipped { | |
-webkit-transform: rotateY( 180deg ); | |
-moz-transform: rotateY( 180deg ); | |
-o-transform: rotateY( 180deg ); | |
transform: rotateY( 180deg ); | |
} | |
.card .front, | |
.card .back { | |
display: block; | |
height: 100%; | |
width: 100%; | |
line-height: 260px; | |
color: white; | |
text-align: center; | |
font-size: 4em; | |
position: absolute; | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
-o-backface-visibility: hidden; | |
backface-visibility: hidden; | |
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25); | |
} | |
.card .back.form { | |
width: 94%; | |
padding-left: 3%; | |
padding-right: 3%; | |
font-size: 16px; | |
text-align: left; | |
line-height: 25px; | |
} | |
.formItem:first-child { | |
margin-top: 20px; | |
} | |
.card .back label { | |
display: inline-block; | |
width: 70px; | |
text-align: left; | |
} | |
.card .front { | |
background: #096AA3; | |
} | |
.card .back { | |
background: #03446A; | |
-webkit-transform: rotateY( 180deg ); | |
-moz-transform: rotateY( 180deg ); | |
-o-transform: rotateY( 180deg ); | |
transform: rotateY( 180deg ); | |
} | |
.cardTitle { | |
font-size: 1.4em; | |
line-height: 1.2em; | |
margin: 0; | |
} | |
.content { | |
padding: 4%; | |
font-weight: 100; | |
text-align: left; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment