Design a Rotating card effect using HTML and CSS - GeeksforGeeks

05 Mar, 2021
Rotating cards are the effect on cards that will rotate to some degree when you hover your mouse over them. There will be information, links, or images on the card which will be visible when you hover over the cards.
In this article, you’re going to learn how to make rotating cards on your website using only HTML and CSS.
Step by step implementation:
Step 1: HTML file for card
HTML
<!DOCTYPE html><html>  <head>    <meta name="viewport" content=        "width=device-width, initial-scale=1"></head>  <body>      <!-- Give a proper heading-->    <h1 style="color: green; text-align: center;">        GeeksForGeeks Rotating Card    </h1>          <div="container">          <!-- create a class to build the             structure of card using div-->        <div class="card GFG"></div>    </div></body>  </html>
Step 2: Decorating the front of the card using CSS: We have built the structure of first face of the card in the HTML part. Now we need to design the card with different CSS properties and the key is to use the transform property of CSS and rotate the card by 45 degree i.e. transform: rotate(45deg). So, now add the below written CSS code inside head tag.
.card {    position: absolute;    width: 200px;    height: 200px;    display: inline-block;    border-radius: 10px;    padding: 15px 25px;    box-sizing: border-box;    cursor: pointer;    margin: 10px 15px;    transition: transform 0.5s;    background-position: right;    background-size: cover;    transform: rotate(45deg);}  .GFG {    margin-top: 170px;    margin-left: 600px;    background-image: url(gfg.jpg);}  .card:hover {    transform: translateY(-10px);}
Note: You can rotate your cards as much as possible depending on the transform: rotate(45deg) and the background-image is in images folder and we will access that image using url() and this url() will take the address of the saved image.
Example: Complete HTML code is given as an example for your help. This example uses transform: rotate(45deg) property to rotate the card.
HTML
<!DOCTYPE html><html>  <head>    <meta name="viewport" content=        "width=device-width, initial-scale=1">      <!-- CSS code -->    <style>        .card {            position: absolute;            width: 200px;            height: 200px;            display: inline-block;            border-radius: 10px;            padding: 15px 25px;            box-sizing: border-box;            cursor: pointer;            margin: 10px 15px;            transition: transform 0.5s;            background-position: right;            background-size: cover;            transform: rotate(45deg);        }                  .GFG {            margin-top: 170px;            margin-left: 600px;            background-image: url(gfg.jpg);        }                  .card:hover {            transform: translateY(-10px);        }    </style></head>  <body>      <!-- Give a proper heading-->    <h1 style="color: green; text-align: center;">        GeeksForGeeks Rotating Card    </h1>          <div="container">          <!-- Create a class to build the             structure of card using div-->        <div class="card GFG"></div>    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Questions
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)