In this beginner's guide, learn how to create stunning responsive 3D cards with HTML, CSS & JavaScript. Follow our step-by-step guide to building interactive 3D cards from scratch.
Table of Contents
3D cards are a popular way of displaying content on websites as they can add an interactive and engaging element to a website's design. They are created using HTML, CSS, and JavaScript, and can display a variety of content, such as images, text, and videos. By using 3D transformations, the cards create the illusion of depth and movement, which can make a website more visually appealing and interesting for visitors.
In this blog post, we will explore how to create 3D cards with HTML, CSS, and JavaScript. We will break down the process step-by-step to make it easy to understand and follow, even for beginners. First, we will explain what 3D cards are and why they are useful. We will then dive into the details of how to create them, starting with setting up the HTML and then moving onto styling the cards with CSS. After that, we will add 3D transformations to our cards to give them the illusion of depth and movement. Finally, we will add interactivity to our cards using JavaScript.
By the end of this post, you will have a solid understanding of how to create 3D cards and be able to add them to your website's design. Whether you're a beginner or an experienced web developer, this post will provide you with the knowledge and code snippets you need to create visually appealing and interactive 3D cards.
What are 3D cards?
3D cards are a type of graphical user interface (GUI) element that uses 3D transformations to give the illusion of depth and movement on a 2D surface. They are typically used to display content in an interactive and engaging way, and can contain a variety of multimedia elements such as text, images, videos, and animations.
From a technical perspective, 3D cards are created using HTML, CSS, and JavaScript. The HTML provides the structure of the card, while CSS is used to style it and add the 3D transformations. JavaScript is often used to add interactivity, such as hover effects or animations.
To create the 3D effect, CSS is used to transform the card's plane by rotating it on the X, Y, or Z axis. This creates the illusion of depth and allows the card to move and change as the user interacts with it. Additionally, CSS can be used to add shadows and reflections to the card, further enhancing the 3D effect.
Let's start making an amazing responsive 3D cards using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Mubanga
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our 3D cards.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is an HTML document that defines a web page. The page includes a title, a set of meta tags, and a link to an external stylesheet called styles.css.
The body of the page contains a container div with a class of "centered" that holds three divs with a class of "card". Each card div has several child divs:
- A div with a class of "shadow" that contains a background image defined in the style attribute using the CSS variable "--url".
- A div with a class of "image background" that also contains a background image defined in the style attribute using the CSS variable "--url".
- A div with a class of "image cutout" that contains an image with a transparent area in the middle, defined in the style attribute using the CSS variable "--url".
- A div with a class of "content" that contains an H2 heading and a paragraph of text.
The script.js file is referenced at the end of the body and is presumably a JavaScript file that provides interactivity to the page.
This is the basic structure of our 3D cards using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the 3D cards is in place, the next step is to add styling to the 3D cards using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our 3D effect.
This is a block of CSS code that is used to style and format a web page. Let's break down the different parts of the code:
The first line imports a font called Montserrat from Google Fonts, which is then used as the default font for the entire HTML document.
The next few lines set the width and height of the HTML and body elements to 100%, and specify that the Montserrat font should be used as the default font family.
The ".centered" class is used to center the content of a container. It uses flexbox display to center the items, and also sets the gap between the items to 3rem.
The ".card" class is used to define a card component that is positioned relative to its parent element. It has a height of 28rem, a width of 20rem, and an aspect ratio of 5/7. It also has a perspective of 50rem, which creates a 3D effect.
The ".shadow" class is used to create a shadow effect for the card. It uses absolute positioning and sets the background image of the card to a specified URL. It also applies a blur and saturation filter to the image, and sets a box-shadow on the card element. The transform property is used to create a 3D effect.
The ".image" class is used to define an image that is positioned absolute within the card element. It has a gradient overlay and also sets a mask image to create a cutout effect.
The ".background" and ".cutout" classes are used to define two different transform effects for the image element.
The ".content" class is used to define the content that is displayed within the card element. It is positioned absolute within the card and has a padding of 3.5rem. The transform property is used to create a 3D effect.
The "::before" and "::after" pseudo-elements are used to create a border effect around the card. They are positioned absolutely within the card and are given a border style.
The "h2" and "p" elements are used to format the headings and paragraphs within the card element. They use the Montserrat font and also apply a text shadow effect.
This will give our responsive 3D cards an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap");
html,
body {
width: 100%;
height: 100%;
font-family: "Montserrat", sans-serif;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 3rem;
height: 100%;
}
.card {
position: relative;
height: 28rem;
width: 20rem;
aspect-ratio: 5/7;
color: #ffffff;
perspective: 50rem;
}
.card .shadow {
position: absolute;
inset: 0;
background: var(--url);
background-size: cover;
background-position: center;
opacity: 0.8;
filter: blur(2rem) saturate(0.9);
box-shadow: 0 -1.5rem 2rem -0.5rem rgba(0, 0, 0, 0.7);
transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 2rem, -2rem);
}
.card .image {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 40%), var(--url);
background-size: cover;
background-position: center;
-webkit-mask-image: var(--url);
mask-image: var(--url);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
}
.card .image.background {
transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 0rem);
}
.card .image.cutout {
transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 4rem) scale(0.92);
z-index: 3;
}
.card .content {
position: absolute;
display: flex;
flex-direction: column;
justify-content: flex-end;
inset: 0;
padding: 3.5rem;
transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 6rem);
z-index: 4;
}
.card::after, .card::before {
content: "";
position: absolute;
inset: 1.5rem;
border: #e2c044 0.5rem solid;
transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 2rem);
}
.card::before {
z-index: 4;
}
.card.border-left-behind::before {
border-left: transparent;
}
.card.border-right-behind::before {
border-right: transparent;
}
.card.border-bottom-behind::before {
border-bottom: transparent;
}
h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
}
p {
font-weight: 300;
text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
} Step 3 (JavaScript Code):
This is a JavaScript code that adds an interactive 3D effect to a set of cards.
The code starts by defining a constant angle of 20 degrees and a constant rotateCard that refers to the window object.
Two helper functions are defined: lerp and remap. lerp stands for linear interpolation and is used to calculate a value between two endpoints based on a given amount. remap is used to map a value from an old range to a new range.
The code then waits for the DOM content to be loaded and selects all the elements with the class "card". For each card element, two event listeners are added: one for when the mouse moves over the element, and one for when the mouse moves away from the element.
When the mouse moves over a card, the code calculates the position of the mouse relative to the center of the card, maps those values to the range [-20, 20], and stores the mapped values as data attributes on the card element. When the mouse moves away from the card, the data attributes are reset to 0.
Finally, the code defines a function called update that is called 60 times per second using setInterval. This function updates the rotation of each card by interpolating between the current rotation and the target rotation stored in the data attributes. The new rotation values are set as CSS custom properties on the card element, which are used to rotate the card using CSS transforms.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const angle = 20;
const rotateCard = window;
const lerp = (start, end, amount) => {
return (1 - amount) * start + amount * end;
};
const remap = (value, oldMax, newMax) => {
const newValue = ((value + oldMax) * (newMax * 2)) / (oldMax * 2) - newMax;
return Math.min(Math.max(newValue, -newMax), newMax);
};
window.addEventListener("DOMContentLoaded", (event) => {
const cards = document.querySelectorAll(".card");
cards.forEach((e) => {
e.addEventListener("mousemove", (event) => {
const rect = e.getBoundingClientRect();
const centerX = (rect.left + rect.right) / 2;
const centerY = (rect.top + rect.bottom) / 2;
const posX = event.pageX - centerX;
const posY = event.pageY - centerY;
const x = remap(posX, rect.width / 2, angle);
const y = remap(posY, rect.height / 2, angle);
e.dataset.rotateX = x;
e.dataset.rotateY = -y;
});
e.addEventListener("mouseout", (event) => {
e.dataset.rotateX = 0;
e.dataset.rotateY = 0;
});
});
const update = () => {
cards.forEach((e) => {
let currentX = parseFloat(e.style.getPropertyValue('--rotateY').slice(0, -1));
let currentY = parseFloat(e.style.getPropertyValue('--rotateX').slice(0, -1));
if (isNaN(currentX)) currentX = 0;
if (isNaN(currentY)) currentY = 0;
const x = lerp(currentX, e.dataset.rotateX, 0.05);
const y = lerp(currentY, e.dataset.rotateY, 0.05);
e.style.setProperty("--rotateY", x + "deg");
e.style.setProperty("--rotateX", y + "deg");
})
}
setInterval (update,1000/60)
});Final Output:
Conclusion:
In conclusion, 3D cards are a powerful tool that can enhance the user experience on websites by providing an engaging and interactive element. They are created using HTML, CSS, and JavaScript, and are easy to customize and integrate into any website's design. By adding 3D transformations and interactivity, 3D cards can make a website more visually appealing and interesting for visitors, which can lead to increased engagement and conversions.
In this post, we provided a step-by-step guide on how to create 3D cards from scratch. We started by setting up the HTML and then moved onto styling the cards with CSS. Next, we added 3D transformations to our cards to give them the illusion of depth and movement, and finally, we added interactivity to our cards using JavaScript. We also included code snippets and explanations for each step, making it easy for beginners and experienced developers alike to follow along and create their own 3D cards.
Incorporating 3D cards into your website's design can be a great way to set yourself apart from the competition and create a unique and engaging user experience. By following the steps outlined in this post, you will be well on your way to creating visually stunning and interactive 3D cards that will captivate your audience.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
