.screen1ConDiv {
width: 200px;
height: 200px;
border: 0px solid rgb(255, 0, 0);
perspective: 600px;
margin-top: -100px;
}

.screen1Img {
 width: 100px;
 height: 300px;
position: absolute;
border: 1px solid black;
background: rgba(100,100,100,0.5); 
transform-style: preserve-3d;
animation-name: rotateAnim;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
box-shadow: -15px 15px 20px rgba(0, 0, 0, 0.5);
}


@keyframes r1Anim{
0% { transform: rotateY(0deg) translateX(120px); z-index: 0;}
12.5% { transform: rotateY(45deg) translateX(120px); z-index: -1;}
25% { transform: rotateY(90deg) translateX(120px);  z-index: -2;}
37.5% { transform: rotateY(135deg) translateX(120px); z-index: -1;}
50% { transform: rotateY(180deg) translateX(120px);  z-index: 0;}
62.5% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
75% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
87.5% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
100% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
}

@keyframes r2Anim{
0% { transform: rotateY(45deg) translateX(120px); z-index: -1;}
12.5% { transform: rotateY(90deg) translateX(120px);  z-index: -2;}
25% { transform: rotateY(135deg) translateX(120px); z-index: -1;}
37.5% { transform: rotateY(180deg) translateX(120px);  z-index: 0;}
50% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
62.5% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
75% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
87.5% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
100% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
}

@keyframes r3Anim{
0% { transform: rotateY(90deg) translateX(120px);  z-index: -2;}
12.5% { transform: rotateY(135deg) translateX(120px); z-index: -1;}
25% { transform: rotateY(180deg) translateX(120px);  z-index: 0;}
37.5% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
50% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
62.5% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
75% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
87.5% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
100% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
}

@keyframes r4Anim{
0% { transform: rotateY(135deg) translateX(120px); z-index: -1;}
12.5% { transform: rotateY(180deg) translateX(120px);  z-index: 0;}
25% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
37.5% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
50% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
62.5% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
75% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
87.5% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
100% { transform: rotateY(495deg) translateX(120px);  z-index: -1;}
}

@keyframes r5Anim{
0% { transform: rotateY(180deg) translateX(120px);  z-index: 0;}
12.5% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
25% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
37.5% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
50% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
62.5% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
75% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
87.5% { transform: rotateY(495deg) translateX(120px);  z-index: -1;}
100% { transform: rotateY(540deg) translateX(120px); z-index: 0;}
}


@keyframes r6Anim{
0% { transform: rotateY(225deg) translateX(120px); z-index: 1;}
12.5% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
25% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
37.5% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
50% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
62.5% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
75% { transform: rotateY(495deg) translateX(120px);  z-index: -1;}
87.5% { transform: rotateY(540deg) translateX(120px); z-index: 0;}
100% { transform: rotateY(585deg) translateX(120px);  z-index: 1;}
}

@keyframes r7Anim{
0% { transform: rotateY(270deg) translateX(120px);  z-index: 2;}
12.5% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
25% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
37.5% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
50% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
62.5% { transform: rotateY(495deg) translateX(120px);  z-index: -1;}
75% { transform: rotateY(540deg) translateX(120px); z-index: 0;}
87.5% { transform: rotateY(585deg) translateX(120px);  z-index: 1;}
100% { transform: rotateY(630deg) translateX(120px); z-index: 2;}
}

@keyframes r8Anim{
0% { transform: rotateY(315deg) translateX(120px);  z-index: 1;}
12.5% { transform: rotateY(360deg) translateX(120px);  z-index: 0;}
25% { transform: rotateY(405deg) translateX(120px); z-index: -1;}
37.5% { transform: rotateY(450deg) translateX(120px); z-index: -2;}
50% { transform: rotateY(495deg) translateX(120px);  z-index: -1;}
62.5% { transform: rotateY(540deg) translateX(120px); z-index: 0;}
75% { transform: rotateY(585deg) translateX(120px);  z-index: 1;}
87.5% { transform: rotateY(630deg) translateX(120px); z-index: 2;}
100% { transform: rotateY(675deg) translateX(120px);  z-index: 1;}
}




    /* Media query for mobile view */
@media (max-width: 1000px) {

.screen1ConDiv {
    margin-top: -400px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.screen1Img {
 width: 200px;
 height: 500px;

}

@keyframes r1Anim{
0% { transform: rotateY(0deg) translateX(200px); z-index: 0;}
12.5% { transform: rotateY(45deg) translateX(200px); z-index: -1;}
25% { transform: rotateY(90deg) translateX(200px);  z-index: -2;}
37.5% { transform: rotateY(135deg) translateX(200px); z-index: -1;}
50% { transform: rotateY(180deg) translateX(200px);  z-index: 0;}
62.5% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
75% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
87.5% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
100% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
}

@keyframes r2Anim{
0% { transform: rotateY(45deg) translateX(200px); z-index: -1;}
12.5% { transform: rotateY(90deg) translateX(200px);  z-index: -2;}
25% { transform: rotateY(135deg) translateX(200px); z-index: -1;}
37.5% { transform: rotateY(180deg) translateX(200px);  z-index: 0;}
50% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
62.5% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
75% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
87.5% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
100% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
}

@keyframes r3Anim{
0% { transform: rotateY(90deg) translateX(200px);  z-index: -2;}
12.5% { transform: rotateY(135deg) translateX(200px); z-index: -1;}
25% { transform: rotateY(180deg) translateX(200px);  z-index: 0;}
37.5% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
50% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
62.5% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
75% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
87.5% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
100% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
}

@keyframes r4Anim{
0% { transform: rotateY(135deg) translateX(200px); z-index: -1;}
12.5% { transform: rotateY(180deg) translateX(200px);  z-index: 0;}
25% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
37.5% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
50% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
62.5% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
75% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
87.5% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
100% { transform: rotateY(495deg) translateX(200px);  z-index: -1;}
}

@keyframes r5Anim{
0% { transform: rotateY(180deg) translateX(200px);  z-index: 0;}
12.5% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
25% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
37.5% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
50% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
62.5% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
75% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
87.5% { transform: rotateY(495deg) translateX(200px);  z-index: -1;}
100% { transform: rotateY(540deg) translateX(200px); z-index: 0;}
}


@keyframes r6Anim{
0% { transform: rotateY(225deg) translateX(200px); z-index: 1;}
12.5% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
25% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
37.5% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
50% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
62.5% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
75% { transform: rotateY(495deg) translateX(200px);  z-index: -1;}
87.5% { transform: rotateY(540deg) translateX(200px); z-index: 0;}
100% { transform: rotateY(585deg) translateX(200px);  z-index: 1;}
}

@keyframes r7Anim{
0% { transform: rotateY(270deg) translateX(200px);  z-index: 2;}
12.5% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
25% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
37.5% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
50% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
62.5% { transform: rotateY(495deg) translateX(200px);  z-index: -1;}
75% { transform: rotateY(540deg) translateX(200px); z-index: 0;}
87.5% { transform: rotateY(585deg) translateX(200px);  z-index: 1;}
100% { transform: rotateY(630deg) translateX(200px); z-index: 2;}
}

@keyframes r8Anim{
0% { transform: rotateY(315deg) translateX(200px);  z-index: 1;}
12.5% { transform: rotateY(360deg) translateX(200px);  z-index: 0;}
25% { transform: rotateY(405deg) translateX(200px); z-index: -1;}
37.5% { transform: rotateY(450deg) translateX(200px); z-index: -2;}
50% { transform: rotateY(495deg) translateX(200px);  z-index: -1;}
62.5% { transform: rotateY(540deg) translateX(200px); z-index: 0;}
75% { transform: rotateY(585deg) translateX(200px);  z-index: 1;}
87.5% { transform: rotateY(630deg) translateX(200px); z-index: 2;}
100% { transform: rotateY(675deg) translateX(200px);  z-index: 1;}
}

}