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'); }); });
Expand for more options Login