3D Tilt Food Cards Using HTML CSS JavaScript
If you are working on a restaurant website, food delivery app, or an online food menu, then adding 3D Tilt Food Cards can make your design stand out. These cards respond to mouse movements and create an interactive experience for users. In this tutorial, we will build beautiful food menu cards with tilt hover effect step by step using HTML, CSS, and JavaScript.
📹 Video Tutorial
If you prefer watching instead of reading, here’s the complete step-by-step video tutorial. Follow along to understand how the 3D tilt hover animation works in real-time.
5. Why Use 3D Tilt Cards?
- They enhance user experience with smooth interactive design.
- Perfect for restaurant menus, e-commerce product showcases, and portfolio cards.
- Beginner-friendly project to practice HTML, CSS & JavaScript.
- Makes your website look modern and professional.
HTML Structure for Food Card
We’ll start by creating a simple card that includes a food image, title, and description. You can duplicate this card to make multiple items like burgers, pizza, sandwiches, desserts, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Tilt Food Cards</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
<div class="card">
<img src="img/chicken-biryani.webp" alt="Biryani">
<div class="content">
<h3 class="title">Chicken Biryani</h3>
<p class="description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit cupiditate.
</p>
<p class="price">$21.99</p>
</div>
</div>
<div class="card">
<img src="img/pizza.webp" alt="Biryani">
<div class="content">
<h3 class="title">Cheese Pizza</h3>
<p class="description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit odit quae.
</p>
<p class="price">$17.99</p>
</div>
</div>
<div class="card">
<img src="img/pasta.png" alt="Biryani">
<div class="content">
<h3 class="title">Pasta Prmiavera</h3>
<p class="description">
Lorem, ipsum dolor sit amet consectetur adipisicing.
</p>
<p class="price">$12.99</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Styling for Food Card
Now, let’s style our card using CSS. We will add background, shadows, and make it look clean and modern.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
background-color: #f7f7f7;
display: flex;
height: 100vh;
font-family: "Poppins", sans-serif;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card-container{
display: flex;
gap: 40px;
perspective: 1500px;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.card{
position: relative;
width: 250px;
height: 400px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.1s ease, box-shadow 0.2s ease;
transform-style: preserve-3d;
cursor: pointer;
overflow: hidden;
margin-bottom: 20px;
background-color: #ffffff;
padding: 30px;
text-align: center;
}
.card::before{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.05),
transparent
);
pointer-events: none;
transform: rotate(225deg);
transition: opacity 0.2s ease;
}
.card img{
width: 100%;
height: 55%;
top: 20px;
object-fit: cover;
position: relative;
}
.card .title{
margin: 10px 0 0;
}
.card .description{
font-size: 14px;
color: #909090;
margin: 0 0 15px 0;
}
.card .price{
margin: 5px 0;
font-size: 18px;
color: #ff6247;
}
.card:hover{
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px){
.card{
width: 300px;
padding: 30px;
}
}
@media (max-width: 400px){
.card-container{
flex-direction: column;
gap: 20px;
}
.card{
width: 250px;
height: auto;
}
}
JavaScript for 3D Tilt Hover Effect
To make the card tilt when the user hovers the mouse, we use JavaScript. It detects the mouse position and applies a rotation effect accordingly.
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
card.addEventListener("mousemove", (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = (y - centerY) / 10;
const rotateY = (x - centerX) / 10;
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`;
});
card.addEventListener("mouseleave", () => {
card.style.transform = "rotateX(0deg) rotateY(0deg)";
});
});
Multiple Food Cards in a Grid Layout
You can also display multiple cards in a responsive grid layout. Here’s an example with three food items in a row.
Final Output
Now, when you hover over any food card, it will tilt beautifully based on your mouse movement. The animation is smooth, responsive, and highly customizable.
⬇ Download Source Code
0 Comments