Looking for a fun and beginner-friendly way to practice HTML5 and CSS3? In this post, we’ll build a set of rotating playing cards using just HTML and CSS — no JavaScript or libraries required!
You'll learn how to:
- Use HTML entities for suit symbols (♥ ♦ ♣ ♠)
- Style cards to look like a real deck
- Apply 3D transforms to make them flip on hover
- Create a simple stacked house-of-cards layout
Perfect for beginners who want to explore 3D effects and CSS transitions.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #0b0b0b;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
font-family: 'Georgia', serif;
}
.house {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(10deg);
}
.row {
display: flex;
gap: 20px;
transform-style: preserve-3d;
}
.card {
width: 120px;
height: 180px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
border: 2px solid #000;
background: white;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}
.card-back {
background: repeating-linear-gradient(45deg, #333 0, #333 5px, #555 5px, #555 10px);
color: white;
transform: rotateY(180deg);
justify-content: center;
align-items: center;
font-size: 24px;
}
.corner {
font-size: 18px;
line-height: 1;
}
.corner.top {
align-self: flex-start;
}
.corner.bottom {
align-self: flex-end;
transform: rotate(180deg);
}
.suit {
font-size: 36px;
text-align: center;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* Suit Colors */
.red {
color: #d40000;
}
.black {
color: #000;
}
<div class="house">
<div class="row">
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top red">A<br>♥</div>
<div class="suit red">♥</div>
<div class="corner bottom red">A<br>♥</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top black">K<br>♣</div>
<div class="suit black">♣</div>
<div class="corner bottom black">K<br>♣</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top red">Q<br>♦</div>
<div class="suit red">♦</div>
<div class="corner bottom red">Q<br>♦</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top black">J<br>♠</div>
<div class="suit black">♠</div>
<div class="corner bottom black">J<br>♠</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top red">10<br>♥</div>
<div class="suit red">♥</div>
<div class="corner bottom red">10<br>♥</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div class="card-inner">
<div class="card-face">
<div class="corner top black">9<br>♠</div>
<div class="suit black">♠</div>
<div class="corner bottom black">9<br>♠</div>
</div>
<div class="card-face card-back">CARD</div>
</div>
</div>
</div>
</div>
🃏 What You'll Build
Screenshot
🎥 Screencast
⚙️ How It Works
The core concept relies on HTML structure for each card, and CSS 3D transforms to rotate the card on hover. Each card has:
- A front face with suit and value
- A back face with a patterned background
- Smooth flipping animation using
transform: rotateY(180deg);
The layout uses CSS Flexbox to arrange cards in rows like a stacked house of cards.
📚 Want to Learn More JavaScript?
This project doesn’t use JavaScript, but if you’re ready to take your coding to the next level, check out my book:
📖 Learning JavaScript – A beginner-friendly guide to mastering JavaScript fundamentals.
Or enroll in my full video course:
🎓 Learning JavaScript (Online Course) – A hands-on course designed to build your skills from the ground up.
👩💻 Need Help? Book a 1-on-1 Session
I'm also available for one-on-one programming tutorials, including:
- JavaScript
- HTML/CSS
- Front-End Projects
✅ Conclusion
This simple rotating playing card project is a great way to understand how HTML5 and CSS3 can create interactive, animated UIs without JavaScript.
Ready to dive deeper? Try converting these cards into a full card game layout using JS in your next project!
Let me know in the comments if you tried this out, and don’t forget to subscribe for more tutorials!
Disclosure: Some of the links above are referral (affiliate) links. I may earn a commission if you purchase through them - at no extra cost to you.
Edward is a software engineer, web developer, and author dedicated to helping people achieve their personal and professional goals through actionable advice and real-world tools.