Skip to content

Instantly share code, notes, and snippets.

@cswagerty
Created Jan 24, 2019
Embed
What would you like to do?
playing cards
<main>
<div class="card">
<div class="face face-front">
<div class="card-corner card-corner-top">
<span class="card-name">A</span>
<span class="card-suit"></span>
</div>
<div class="card-middle"></div>
<div class="card-corner card-corner-bottom">
<span class="card-name">A</span>
<span class="card-suit"></span>
</div>
</div>
<div class="face face-back">
</div>
</div>
</main>
const cardEl = document.querySelector('.card');
cardEl.addEventListener('click', e => e.currentTarget.classList.toggle('flipped'));
main {
max-width: 980px;
margin: 40px auto;
padding: 40px;
background-color: #060;
}
$card-height: 300px;
$card-width: $card-height * (7/10);
$card-red: #c00;
.card {
width: $card-width;
height: $card-height;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
cursor: pointer;
}
.face {
color: $card-red;
height: $card-height;
box-sizing: border-box;
border-radius: $card-height / 20;
border: 1px solid #333;
backface-visibility: hidden;
position: absolute;
top: 0;
width: 100%;
&-front {
z-index: 1;
display: flex;
padding: $card-height / 10;
background-color: white;
}
&-back {
background-color: cornflowerblue;
transform: rotateY(180deg);
}
}
.card.flipped {
transform: rotateY(180deg);
}
.card-corner {
display: flex;
flex-direction: column;
font-size: $card-height / 10;
&.card-corner-top {
align-self: flex-start;
}
&.card-corner-bottom {
align-self: flex-end;
transform: rotateX(180deg);
}
}
.card-middle {
align-self: center;
flex-grow: 1;
font-size: $card-height / 4;
text-align: center;
}
.card-name,
.card-suit {
text-align: center;
}
.card-name {
font-family: "Courier New", serif;
font-weight: 700;
line-height: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment