How to Create 3D Flipping Product
Card With HTML & CSS
What is a flip card?
Flip Cards are durable cards, usually created as sets, which convey printed information in a simple and convenient format.
Video Tutorial of 3D Flipping Product Card
3D Flipping Product Card [Source Codes]
To Create 3D Flipping Product Card in HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <div class="card">
- <div class="front">
- <img src="Smartwatch.jpg">
- <h2>$129</h2>
- <h3>Lige BW0242 Smartwatch</h3>
- <h6>Special Edition</h6>
- </div>
- <div class="back">
- <button>Add To Cart</button>
- </div>
- </div>
- </div>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- }
- body {
- background-color: #282A35;
- }
- .container {
- height: 25em;
- width: 18.75em;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- perspective: 37.5em;
- }
- .card {
- height: inherit;
- width: inherit;
- transform-style: preserve-3d;
- transition: 1s;
- }
- .card:hover {
- transform: rotateY(-180deg);
- }
- .front,
- .back {
- background-color: #d9d9d9;
- height: inherit;
- width: inherit;
- position: absolute;
- border-radius: 1em;
- backface-visibility: hidden;
- }
- .front img {
- display: block;
- margin: auto;
- width: 14.37em;
- border-radius: 1em;
- margin: 2em auto 1em auto;
- }
- .front h2,
- .front h3,
- .front h6 {
- text-align: center;
- }
- .front h2 {
- font-size: 2em;
- font-weight: 300;
- color: #5b5b5b;
- }
- .front h3 {
- font-size: 1em;
- font-weight: 500;
- }
- .front h6 {
- color: #a0a0a0;
- font-weight: 500;
- letter-spacing: 0.1em;
- }
- .back {
- transform: rotateY(180deg);
- }
- .back button {
- position: absolute;
- transform: translate(-50%, -50%);
- left: 50%;
- top: 50%;
- width: 12.5em;
- font-size: 1em;
- background-color: #2582EE;
- color: #ffffff;
- border-radius: 0.5em;
- padding: 1em;
- cursor: pointer;
- border: none;
- outline: none;
- }
- .back button:hover {
- background-color: #919191;
- }
If you face any difficulties while creating your 3D Flipping Product Card or your code is not working as expected, you can download the source code files by clicking on the download button.