Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a 3D spinning Card. To build this project, we need HTML and CSS.
The key concepts you will learn in this project – are perspective, transform, transform style, animation and keyframes.
This is an intermediate-level CSS tutorial. If you are interested to learn more about such 3D animations and effects using just HTML and CSS, you can check out this playlist here. This playlist consists of a bunch of tutorials that will help you 3D animations.
In this project, we will create a card that consists of some content like IMG element and p element on the front and back sides of it. We would then animate it to spin infinitely.
Video Tutorials:
If you are interested to learn by watching a video tutorial instead of reading this blog post you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us look at the project folder structure. We create a project folder called – ‘3D spinning card’. Inside this folder, we have two files – index.html and style.css. The first file is the HTML document and the second file is the stylesheet.
HTML:
We begin with the HTML code. The HTML code creates the elements to build the structure of our card. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>3D Spinning Card</title> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="card"> <!-- Front Side--> <div class="front center"> <img src="image1.png" /> <h3>FRONT</h3> <p>3D Spinning Card</p> </div> <!-- Back Side--> <div class="back center"> <img src="image2.png" /> <h3>BACK</h3> <p>3D Spinning Card</p> </div> </div> </div> </body> </html>
CSS:
Next, we style the card and animation to it using CSS. For this copy, the code provided to you below and paste it into the stylesheet.
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #4089f5; } .container { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; perspective: 50em; } .card { height: 25em; width: 18.75em; position: relative; font-family: "Poppins", sans-serif; animation: spin 5s infinite linear; transform-style: preserve-3d; } @keyframes spin { 100% { transform: rotateY(360deg); } } .front, .back { background-color: #ffffff; height: 100%; width: 100%; font-size: 1.2em; border-radius: 0.6em; backface-visibility: hidden; } .back { position: relative; transform: rotateY(180deg); bottom: 100%; } .center { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; } .container h3 { font-weight: 500; letter-spacing: 0.05em; } .container p { color: #838094; font-size: 0.8em; font-weight: 300; letter-spacing: 0.05em; } img { width: 5em; margin-bottom: 1em; } @media screen and (min-width: 700px) { .container { font-size: 20px; } }
That’s it for this tutorial. If you face any issues while creating this animation, you can download the source code by clicking on the ‘Download Code’ button below. Also if you have any queries, suggestions or feedback you can comment below.
Happy Coding!