pkg-components
Version:
30 lines (25 loc) • 717 B
CSS
.carousel {
position: relative;
width: var(--card-width);
height: var(--card-height);
left: 50%;
transform: translateX(-50%);
perspective: 500px;
transform-style: preserve-3d;
justify-content: center;
align-items: center;
}
.card-container {
position: absolute;
width: 80%;
height: 100%;
left: 0;
right: 0;
margin: auto;
transform: rotateY(calc(var(--offset) * 50deg))
scaleY(calc(1 + var(--abs-offset) * -0.4))
translateZ(calc(var(--abs-offset) * -30rem))
translateX(calc(var(--direction) * -5rem));
/* filter: blur(calc(var(--abs-offset) * 1rem)); */
transition: all 0.3s ease-out;
}