.carousel-container {
    perspective: 1400px;
    width: 360px;
    height: 240px;
    position: relative;
    margin: 0 auto;
}

.carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.slide {
    position: absolute;
    height: 220px;
    width: 340px;
    background: #f7f7f7;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}

#slide1 {
    transform: rotateY(0deg) translateZ(340px);
}

#slide2 {
    transform: rotateY(72deg) translateZ(340px);
}

#slide3 {
    transform: rotateY(144deg) translateZ(340px);
}

#slide4 {
    transform: rotateY(216deg) translateZ(340px);
}

#slide5 {
    transform: rotateY(288deg) translateZ(340px);
}