RetroDECK-Website/css/carousel.css
2024-10-16 11:43:00 -04:00

53 lines
778 B
CSS

.stack {
position: relative;
display: flex;
padding-right: 30px;
}
#features .row:nth-child(odd) .stack {
padding-right: 30px;
}
.screenshot {
position: relative;
/* animation: lower 100ms forwards; */
}
.screenshot:nth-child(3) {
z-index: 4;
left: -200%;
}
.screenshot:nth-child(2) {
z-index: 3;
left: calc(-100% + 10px);
bottom: 10px;
}
.screenshot:nth-child(1) {
z-index: 2;
left: 20px;
bottom: 20px;
}
@keyframes lower {
from {
animation-timing-function: ease-in-out;
}
to {
transform: translate(-10px, 10px);
}
}
@keyframes swap {
50% {
z-index: 3;
}
67% {
transform: translate(35px, -125%) rotate(2.5deg);
z-index: 1;
}
100% {
transform: translate(30px, -30px) rotate(0deg);
z-index: 0;
}
}