.scene{border:1px solid #ccc;position:relative;width:210px;height:140px;margin:80px auto;perspective:1000px}.carousel{width:100%;height:100%;position:absolute;transform:translateZ(-288px);transform-style:preserve-3d;transition:transform 1s}.carousel__cell{position:absolute;width:190px;height:120px;left:10px;top:10px;border:2px solid #000;line-height:116px;font-size:80px;font-weight:700;color:#fff;text-align:center;transition:transform 1s,opacity 1s}.carousel__cell:nth-child(9n+1){background:rgba(255,0,0,.8)}.carousel__cell:nth-child(9n+2){background:rgba(255,170,0,.8)}.carousel__cell:nth-child(9n+3){background:rgba(170,255,0,.8)}.carousel__cell:nth-child(9n+4){background:rgba(0,255,0,.8)}.carousel__cell:nth-child(9n+5){background:rgba(0,255,170,.8)}.carousel__cell:nth-child(9n+6){background:rgba(0,170,255,.8)}.carousel__cell:nth-child(9n+7){background:rgba(0,0,255,.8)}.carousel__cell:nth-child(9n+8){background:rgba(170,0,255,.8)}.carousel__cell:nth-child(9n+0){background:rgba(255,0,170,.8)}.carousel__cell:first-child{transform:rotateY(0deg) translateZ(288px)}.carousel__cell:nth-child(2){transform:rotateY(40deg) translateZ(288px)}.carousel__cell:nth-child(3){transform:rotateY(80deg) translateZ(288px)}.carousel__cell:nth-child(4){transform:rotateY(120deg) translateZ(288px)}.carousel__cell:nth-child(5){transform:rotateY(160deg) translateZ(288px)}.carousel__cell:nth-child(6){transform:rotateY(200deg) translateZ(288px)}.carousel__cell:nth-child(7){transform:rotateY(240deg) translateZ(288px)}.carousel__cell:nth-child(8){transform:rotateY(280deg) translateZ(288px)}.carousel__cell:nth-child(9){transform:rotateY(320deg) translateZ(288px)}.carousel-options{text-align:center;position:relative;z-index:2;background:hsla(0,0%,100%,.8)}.carousel-container-x{width:100%;display:flex;flex-wrap:nowrap;overflow:hidden;grid-gap:20px;align-items:center}.carousel-container-x>div{transition:all 1s}.carousel-container-y{height:100%;display:flex;flex-direction:column;flex-wrap:nowrap;overflow:hidden;grid-gap:20px}.carousel-container-y>div{transition:all 1s}.carousel-item{height:200px;width:300px;min-width:300px;min-height:200px;border-radius:10px;transition:all .3s}.carousel-item:nth-child(9n+1){background:rgba(255,0,0,.8)}.carousel-item:nth-child(9n+2){background:rgba(255,170,0,.8)}.carousel-item:nth-child(9n+3){background:rgba(170,255,0,.8)}.carousel-item:nth-child(9n+4){background:rgba(0,255,0,.8)}.carousel-item:nth-child(9n+5){background:rgba(0,255,170,.8)}.carousel-item:nth-child(9n+6){background:rgba(0,170,255,.8)}.carousel-item:nth-child(9n+7){background:rgba(0,0,255,.8)}.carousel-item:nth-child(9n+8){background:rgba(170,0,255,.8)}.carousel-item:nth-child(9n+0){background:rgba(255,0,170,.8)}