In this example, I have designed a three-layer animation with CSS.
Html part of the 3D layers design
CSS part of the 3D Layers Design
body{
background-color: #5A97FF;
margin: 0px;
padding: 0px;
}
#main img{
width: 500px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#bottomLayer img{
animation:anim1 2s ease-in-out infinite;
}
#middleLayer img{
top:47%;
animation: anim2 2s ease-in-out infinite;
}
#topLayer img{
top:44%;
animation: anim3 2s ease-in-out infinite;
}
@keyframes anim1{
0%{
top:50%;
}
50%{
top:43%;
}
100%{
top:50%;
}
}
@keyframes anim2{
0%{
top:47%;
}
55%{
top:40%;
}
100%{
top:47%;
}
}
@keyframes anim3{
0%{
top:44%;
}
60%{
top:37%;
}
100%{
top:44%;
}
}
In this example, I have used these three images.
1. Middle Layer Image
2. Top layer Image
3. Mobile Phone Device Image
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You