Design a Rotating card effect using HTML and CSS
Last Updated :
23 Jul, 2025
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.
Example: In this example, we will design a rotating card effect using HTML and CSS.
Step-by-step implementation:
Step 1: HTML file for the 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 class="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 the 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.
CSS
.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 the 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(
https://media.geeksforgeeks.org/wp-content/uploads/20230530074745/gfg.png);
}
.card:hover {
transform: translateY(-10px);
}
</style>
</head>
<body>
<!-- Give a proper heading-->
<h1 style="color: green; text-align: center;">
GeeksForGeeks Rotating Card
</h1>
<div class="container">
<!-- Create a class to build the
structure of card using div-->
<div class="card GFG"></div>
</div>
</body>
</html>
Output:
Similar Reads
Design a Frosted Glass Effect using HTML and CSS In this article, we will implement a frosted glass effect using the bootstrap 4 card class. The below image is the final output that you will get as the final result of this article. Approach: 1. Styling the body: Let's first set the background for your webpage. Write the below code under your head
2 min read
How to create rotating disc effect using CSS? The Rotating Disc Effect also known as Overlapping Disc Effect is a type of illusion effect that can be used for various purposes on a website. It can be used in anything from a loader sticker to creating an illusion for the user. It is called overlapped disc because there are many overlapped discs
3 min read
Designing a Working Table Fan using HTML and CSS In this article, we will design a Working Table-fan using HTML and CSS.List of HTML tags used:Polyline: The <polyline> element is used to create the HTML <svg> element which is a container for SVG graphics any shape that consists of only straight linesdiv: The <div> tag defines a d
2 min read
How to Design Hover Effect for Product Info Card using HTML & CSS ? This project makes a Product info Card using HTML and CSS to display an image of the product, a description of the product, a button to order or purchase, a star rating of the product, etc. These help the users buy the product easily. There is a card at the center of the webpage. This product has a
7 min read
Design a Carousel Column Expansion Animation Effect on Hover using CSS Carousel Column Expansion Animation Effect on Hover in CSS refers to an animation where individual columns (or items) within a carousel expand when hovered over. This effect enhances user interaction by making the hovered column grow in size while smoothly shrinking others, creating a dynamic experi
2 min read
Create a Product Detail Page Template using HTML and CSS In this article, we will create a Product Details Layout Template using HTML & CSS. This Card is generally used in e-commerce websites to make the product more presentable and show details clearly. The card-like structure includes details such as product name, price, and a concise description, p
4 min read