.scene{perspective:1000px;border:1px solid #ccc;width:210px;height:140px;margin:80px auto;position:relative}.carousel{width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s;position:absolute;transform:translateZ(-288px)}.carousel__cell{color:#fff;text-align:center;border:2px solid #000;width:190px;height:120px;font-size:80px;font-weight:700;line-height:116px;transition:transform 1s,opacity 1s;position:absolute;top:10px;left:10px}.carousel__cell:nth-child(9n+1){background:#f00c}.carousel__cell:nth-child(9n+2){background:#fa0c}.carousel__cell:nth-child(9n+3){background:#af0c}.carousel__cell:nth-child(9n+4){background:#0f0c}.carousel__cell:nth-child(9n+5){background:#0fac}.carousel__cell:nth-child(9n+6){background:#0afc}.carousel__cell:nth-child(9n+7){background:#00fc}.carousel__cell:nth-child(9n+8){background:#a0fc}.carousel__cell:nth-child(9n){background:#f0ac}.carousel__cell:first-child{transform:rotateY(0)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;z-index:2;background:#fffc;position:relative}.carousel-container-x{grid-gap:20px;flex-wrap:nowrap;align-items:center;width:100%;display:flex;overflow:hidden}.carousel-container-x>div{transition:all 1s}.carousel-container-y{grid-gap:20px;flex-flow:column;height:100%;display:flex;overflow:hidden}.carousel-container-y>div{transition:all 1s}.carousel-item{border-radius:10px;width:300px;min-width:300px;height:200px;min-height:200px;transition:all .3s}.carousel-item:nth-child(9n+1){background:#f00c}.carousel-item:nth-child(9n+2){background:#fa0c}.carousel-item:nth-child(9n+3){background:#af0c}.carousel-item:nth-child(9n+4){background:#0f0c}.carousel-item:nth-child(9n+5){background:#0fac}.carousel-item:nth-child(9n+6){background:#0afc}.carousel-item:nth-child(9n+7){background:#00fc}.carousel-item:nth-child(9n+8){background:#a0fc}.carousel-item:nth-child(9n){background:#f0ac}