playing cards
A Pen by Corbin Swagerty on CodePen.
<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> |
A Pen by Corbin Swagerty on CodePen.
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; | |
} |