Flipping Window Effect
Flipping window is a new effect that is used in modern web designs. This effect is used as a showcase part, loader part, and in revealing banner. The effect is based on four squares rotating along the X and Y-axis. The order of rotation can be different, i.e it can be XX, XY, YX or YY.
Approach: The approach is to create 4 squares aligned next to each other making a big square(window).Then using @keyframes to rotate these small squares along the X and Y-axis. We have used the alternate sequence of YX i.e; first rotation along Y-axis and second along X-axis and so on.
First Section: In this section, we have created four “span” tags wrapped inside a “div” tag.
- HTML Code:
HTML
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Flipping Window Effect</
title
>
</
head
>
<
body
>
<
div
class
=
"Beginner"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
</
body
>
</
html
>
Second Section: For CSS, follow the below given steps.
- Step 1: Align the “div” to the center of the page.
- Step 2: Create a square applying CSS to the “span” tag.
- Step 3: Now, use the “nth child” property to align all the “spans” next to each other
forming a bigger square. - Step 4: Apply different colors to each “span” to make it look more beautiful.
- Step 5: Use @keyframes to rotate small squares alternatively on Y and X axis.
Note: The order of rotation does not matter, you can follow any order. The same animation can be applied to any shape but square is the most used one.
- CSS Code:
.Beginner
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
}
span {
position
:
absolute
;
width
:
20px
;
height
:
20px
;
background
:
#262626
;
animation: animate
4
s infinite ease-in-out;
}
span:nth-child(
1
) {
background-color
: chocolate;
left
:
-24px
;
top
:
-24px
;
animation-delay:
0.2
s;
}
span:nth-child(
2
) {
background-color
:
rgb
(
57
,
30
,
210
);
left
:
0px
;
top
:
-24px
;
animation-delay:
0.4
s;
}
span:nth-child(
3
) {
background-color
:
rgb
(
36
,
210
,
30
);
left
:
-24px
;
top
:
0px
;
animation-delay:
0.6
s;
}
span:nth-child(
4
) {
background-color
:
rgb
(
210
,
30
,
141
);
left
:
0
;
top
:
0
;
animation-delay:
0.8
s;
}
@keyframes animate {
0%
{
transform: rotateY(
0
deg);
}
20%
{
transform: rotateX(
360
deg);
}
40%
{
transform: rotateY(
180
deg);
}
60%
{
transform: rotateX(
0
deg);
}
80%
{
transform: rotateY(
360
deg);
}
100%
{
transform: rotateX(
180
deg);
}
}
Complete Code: It is the combination of the above two sections.
HTML
<!DOCTYPE html> < html > < head > < title >Flipping Window Effect</ title > < style > .Beginner { position: absolute; top: 50%; left: 50%; } span { position: absolute; width: 20px; height: 20px; background: #262626; animation: animate 4s infinite ease-in-out; } span:nth-child(1) { background-color: chocolate; left: -24px; top: -24px; animation-delay: 0.2s; } span:nth-child(2) { background-color: rgb(57, 30, 210); left: 0px; top: -24px; animation-delay: 0.4s; } span:nth-child(3) { background-color: rgb(36, 210, 30); left: -24px; top: 0px; animation-delay: 0.6s; } span:nth-child(4) { background-color: rgb(210, 30, 141); left: 0; top: 0; animation-delay: 0.8s; } @keyframes animate { 0% { transform: rotateY(0deg); } 20% { transform: rotateX(360deg); } 40% { transform: rotateY(180deg); } 60% { transform: rotateX(0deg); } 80% { transform: rotateY(360deg); } 100% { transform: rotateX(180deg); } } </ style > </ head > < body > < div class = "Beginner" > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ div > </ body > </ html > |
Output:
Contact Us