A Pen by Corbin Swagerty on CodePen.
Created
January 24, 2019 00:59
-
-
Save cswagerty/450f4cd950f5671551871bb4b53be9fa to your computer and use it in GitHub Desktop.
playing cards
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const cardEl = document.querySelector('.card'); | |
cardEl.addEventListener('click', e => e.currentTarget.classList.toggle('flipped')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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