Flipping Window Effect
Last Updated :
15 Jul, 2020
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 = "geeks" >
< 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:
.geeks
{
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 >
.geeks {
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 = "geeks" >
< span ></ span >
< span ></ span >
< span ></ span >
< span ></ span >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...