.slider-container {
    position: relative;
    perspective: 350px;
    transform-style: preserve-3d;
}

.carousel-3d-item {
    position: absolute;
    top: 50%;
    left: 40%;
    outline: 1px solid transparent;
}

#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3) {
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
    transform: translateX(-175px) translateZ(-130px);
    opacity: 0.9;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
    transform: translateX(0) translateZ(0);
    opacity: 1;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
    transform: translateX(175px) translateZ(-130px);
    opacity: 0.9;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}