Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Rotating card effect using HTML and CSS
The effect on cards that will spin slightly when you move your mouse over them is known as rotating cards. Hovering over the cards will reveal any information, links, or images that are present on them.
Let’s dive into the article where we are going to design a rotating card effect using HTML and CSS, in which we are going to use the HTML <div> tag. Before we jump into the article, let’s have a quick look at the <div> tag.
HTML <div> tag
The <div> tag is also known as the Division tag. HTML uses the <div> tag to create content divisions for things like text, graphics, headers, footers, navigation bars, etc. A div tag has an open (<div>) and a closing (</div>) tag, and the closure of the tag is required. Since it allows us to construct specific sections for different types of data or functions on the page, the <div> tag is the most useful in web development. It helps us to break off data on the page.
Syntax
Following is the syntax for HTML <div> tag
<div>…..</div>
Example
Let’s look at the following example, where we are going to design a rotating card effect on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #D5F5E3;
font-family: 'Blackadder ITC';
}
.tutorial {
position: absolute;
top: 52%;
left: 52%;
width: 290px;
height: 290px;
margin: -149px;
perspective: 300px;
}
.tutorial1 {
width: 100%;
height: 100%;
box-shadow: 0 0 10px #DE3163;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.tutorial:hover .tutorial1 {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.tp1,
.tp2 {
position: absolute;
height: 100%;
width: 100%;
background: #EBF5FB;
line-height: 290px;
color: #6C3483;
text-align: center;
font-size: 40px;
backface-visibility: hidden;
}
.tp2 {
background: #FEF9E7;
color: #239B56;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="tutorial">
<div class="tutorial1">
<div class="tp1"> TutorialsPoint </div>
<div class="tp2"> The E-way Learning. </div>
</div>
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the card applied with CSS and the text on it displayed on the webpage. When the user moves the mouse over the card, it starts to rotate 180 degrees and displays another side of the card.
14 Views
