Simple Card Flip Animations
HTML
<header>
<h1>Simple Card Flip Animations</h1>
</header>
<div class="container">
<div id="flipcard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
<div id="spincard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
<div id="doorcard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
<div id="acard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
</div>
CSS
*{ user-select: none;}
.container {
width: 500px;
height: 1000px;
perspective: 800px;
}
header, p {
text-align: center;
font: 30px Calibri Light;
}
#acard {
margin: 20px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: right center;
}
#acard div {
display: block;
position: absolute;
width: 200px;
height: 200px;
backface-visibility: hidden;
}
#acard .front {
background: #ffe49e;
}
#acard .back {
background: #ffe49e;
transform: rotateX( 180deg );
}
#acard.flipped {
transform: rotateY( 180deg ) rotateZ( 0deg ) rotateZ( 180deg );
}
#doorcard {
margin: 20px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: center;
/*transform-origin: right center; */
}
#doorcard div {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#doorcard .front {
background: #ff9e9e;
}
#doorcard .back {
background: #ff9e9e;
transform: rotateY( 180deg );
}
#doorcard.flipped {
transform: rotateY( 180deg );
}
#spincard {
margin: 20px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: right center;
}
#spincard div {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#spincard .front {
background: #9effad;
}
#spincard .back {
background: #9effad;
transform: rotateX( 180deg );
}
#spincard.flipped {
transform: rotateX( -180deg );
}
#flipcard {
margin: 20px;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: right center;
}
#flipcard div {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#flipcard .front {
background: #9cceff;
}
#flipcard .back {
background: #9cceff;
transform: rotateY( 180deg );
}
#flipcard.flipped {
transform: translateX( -100% ) rotateY( -180deg );
}
JAVASCRIPT
$(document).ready(function () {
$('#flipcard').click(function () {
$('#flipcard').toggleClass('flipped');
});
$('#doorcard').click(function () {
$('#doorcard').toggleClass('flipped');
});
$('#spincard').click(function () {
$('#spincard').toggleClass('flipped');
});
$('#acard').click(function () {
$('#acard').toggleClass('flipped');
});
});
