"card"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="element-card"> <div class="front-facing"> <h1 class="abr">Cu</h1> <p class="title">Copper</p> <span class="atomic-number">29</span> <span class="atomic-mass">63.54</span> </div> <div class="back-facing"> <p>Copper is a chemical element with symbol Cu (from Latin: cuprum) and atomic number 29. It is a soft, malleable, and ductile metal with very high thermal and electrical conductivity.</p> <p><a class="btn" href="https://en.wikipedia.org/wiki/Copper" target="_blank">More info</a></p> </div> </div> <div class="element-card"> <div class="front-facing"> <h1 class="abr">Ag</h1> <p class="title">Silver</p> <span class="atomic-number">47</span> <span class="atomic-mass">107.86</span> </div> <div class="back-facing"> <p>Silver is the metallic element with the atomic number 47. Its symbol is Ag, from the Latin argentum, derived from the Greek ὰργὀς, and ultimately from a Proto-Indo-European language root reconstructed as *h2erǵ-, "grey" or "shining".</p> <p><a class="btn" href="https://en.wikipedia.org/wiki/Silver" target="_blank">More info</a></p> </div> </div> <div class="element-card"> <div class="front-facing"> <h1 class="abr">Au</h1> <p class="title">Gold</p> <span class="atomic-number">79</span> <span class="atomic-mass">196.97</span> </div> <div class="back-facing"> <p>Gold is a chemical element with symbol Au and atomic number 79. In its purest form, it is a bright, slightly reddish yellow, dense, soft, malleable, and ductile metal. Chemically, gold is a transition metal and a group 11 element.</p> <p><a class="btn" href="https://en.wikipedia.org/wiki/Gold" target="_blank">More info</a></p> </div> </div> <div class="element-card"> <div class="front-facing"> <h1 class="abr">Rg</h1> <p class="title">Roentgenium</p> <span class="atomic-number">111</span> <span class="atomic-mass">282</span> </div> <div class="back-facing"> <p>Roentgenium is a chemical element with symbol Rg and atomic number 111. It is an extremely radioactive synthetic element (an element that can be created in a laboratory but is not found in nature).</p> <p><a class="btn" href="https://en.wikipedia.org/wiki/Roentgenium" target="_blank">More info</a></p> </div> </div> </div>
html, body { position: relative; height: 100%; margin: 0; padding: 0; } body { background-color: #eeeeee; font-family: 'helvetica', sans-serif; font-size: 16px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: -webkit-linear-gradient(315deg, #2980b9 0%, #9b59b6 100%); background: linear-gradient(135deg, #2980b9 0%, #9b59b6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); } .container { position: relative; width: 100%; max-width: 960px; min-height: 100%; margin: 0px auto; padding: 20px; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .element-card { position: relative; width: 100px; height: 130px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotatey(0deg) translatex(0px) translatey(0px); transform: rotatey(0deg) translatex(0px) translatey(0px); -webkit-transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4); margin: 5px; cursor: pointer; } .element-card:hover { -webkit-transform: rotatey(45deg) translatex(0px) translatey(0px); transform: rotatey(45deg) translatex(0px) translatey(0px); } .element-card.open { width: 200px; height: 260px; -webkit-transform: rotatey(-180deg) translatex(0px) translatey(0px); transform: rotatey(-180deg) translatex(0px) translatey(0px); } .element-card .front-facing { -webkit-transform: rotateY(0deg) translateZ(2px); transform: rotateY(0deg) translateZ(2px); position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #ecf0f1; border: 2px white solid; border-radius: 5px; } .element-card .front-facing .abr { width: 100%; position: absolute; top: 50%; left: 0; font-size: 42px; margin: -35px 0 0 0; text-align: center; color: #3498db; } .element-card .front-facing .title { width: 100%; position: absolute; top: 50%; left: 0; text-transform: uppercase; font-size: 12px; margin: 15px 0 0 0; text-align: center; color: #3498db; } .element-card .front-facing .atomic-number { position: absolute; top: 10px; left: 10px; font-size: 12px; color: #2980b9; } .element-card .front-facing .atomic-mass { position: absolute; bottom: 10px; right: 10px; font-size: 12px; color: #2980b9; } .element-card .back-facing { -webkit-transform: rotateY(180deg) translateZ(0px); transform: rotateY(180deg) translateZ(0px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #ecf0f1; border: 2px white solid; border-radius: 5px; padding: 20px; text-align: center; overflow: hidden; } .element-card .back-facing p { font-size: 14px; margin: 0; } .element-card .back-facing a.btn { display: inline-block; background-color: white; padding: 5px 15px; margin: 20px 0 0 0; color: #eee; background-color: #3498db; text-decoration: none; border-radius: 3px; } .element-card .back-facing a.btn:hover, .element-card .back-facing a.btn:focus { color: #fff; background-color: #2980b9; }
'use strict'; $(document).ready(function () { $('.element-card').on('click', function () { if ($(this).hasClass('open')) { $(this).removeClass('open'); } else { $('.element-card').removeClass('open'); $(this).addClass('open'); } }); });

Related: See More


Questions / Comments: