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
Flipping Window Effect
The "flipping window" effect, also called the "window rotation" effect, is a visual occurrence that takes place when an object or scene is seen via a number of spinning windows or panels. To give viewers an immersive and engaging experience, the flipping window effect is frequently employed in interactive displays, digital animations, and art installations.
Let’s dive into the article to draw a flipping window effect. It can be done by using CSS @keyframes. Let’s have a quick look at it before we jump into the article.
CSS @keyframes
Keyframes are used for animation in CSS. It provides you more flexibility over the animation you wish to do. By gradually switching from one style to another, the animation is produced. The CSS styles can be modified as often as you like.
Syntax
Following is the syntax for CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}
Example
Considering the following example, where we are going to create the flipping window effect on the webpage.
HTML
Following is the HTML code where we are going to create two span tags and wrap them within a div tag.
<!DOCTYPE html>
<html>
<body>
<div class="tutorial">
<span>A</span>
<span>B</span>
</div>
</body>
</html>
CSS
Now we are going to use the @keyframes, add the animation to it, and add the CSS part to it.
<style>
.tutorial {
position: absolute;
top: 40%;
left: 40%;
}
span {
position: absolute;
width: 50px;
height: 50px;
background: #DE3163;
animation: animate 2s infinite;
}
span:nth-child(1) {
background-color: #8E44AD;
left: -64px;
top: -54px;
animation-delay: 0.1s;
}
@keyframes animate {
10% {
transform: rotateX(360deg);
}
60% {
transform: rotateY(360deg);
}
}
body {
background-color: #D5F5E3;
height:300px;
}
</style>
Complete Code
Now we are going to combine both the codes and observe the output on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
position: absolute;
top: 40%;
left: 40%;
}
span {
position: absolute;
width: 50px;
height: 50px;
background: #DE3163;
animation: animate 2s infinite;
}
span:nth-child(1) {
background-color: #8E44AD;
left: -64px;
top: -54px;
animation-delay: 0.1s;
}
@keyframes animate {
10% {
transform: rotateX(360deg);
}
60% {
transform: rotateY(360deg);
}
}
body {
background-color: #D5F5E3;
height:300px;
}
</style>
</head>
<body>
<div class="tutorial">
<span>A</span>
<span>B</span>
</div>
</body>
</html>
When we run the above code, it will generate an output consisting of the two windows applied with CSS displaying the windows flipping on the webpage.
9 Views
