垂直旋轉的3D引導旋轉木馬

Question

我想延長引導旋轉木馬，使其具有類似這些例子旋轉效果：

https://desandro.github.io/3dtransforms/docs/carousel.html https://codepen.io/nopr/pen/rfBJx

我試圖用這個垂直引導滑動器一個例子，因爲它似乎有CSS我需要：

https://codepen.io/danbhala/pen/eNZrQW/

然而，到目前爲止，我只設法獲得非活動項目（或相反，它們的內容），以規模化，而不是繞Y軸旋轉，使用這些CSS規則，即使：

.carousel.vertical .carousel-inner > .item.next, .carousel.vertical 
.carousel-inner > .item.active.right { 
    -webkit-transform: translate3d(0, 100%, 0) rotateY(90deg); 
      transform: translate3d(0, 100%, 0) rotateY(90deg); 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .item.prev, .carousel.vertical 
.carousel-inner > .item.active.left { 
    -webkit-transform: translate3d(0, -100%, 0) rotateY(-90deg); 
      transform: translate3d(0, -100%, 0) rotateY(-90deg); 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .item.next.left, .carousel.vertical 
.carousel-inner > .item.prev.right, .carousel.vertical .carousel-inner > 
.item.active { 
    -webkit-transform: translate3d(0, 0, 0) rotateY(0deg); 
      transform: translate3d(0, 0, 0) rotateY(0deg); 
    top: 0; 
} 

有什麼辦法來達到同樣的效果，無論幻燈片的數量？

Answer 1

答案竟是真的很簡單 - 我有轉軸錯誤：

例子：https://codepen.io/kenshin23/pen/awvBGQ

.carousel.vertical .carousel-inner > .item.next, .carousel.vertical 
.carousel-inner > .item.active.right { 
     -webkit-transform: translate3d(0, 100%, 0) rotateX(120deg); 
      transform: translate3d(0, 100%, 0) rotateX(120deg); 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .item.prev, .carousel.vertical 
.carousel-inner > .item.active.left { 
    -webkit-transform: translate3d(0, -100%, 0) rotateX(-120deg); 
      transform: translate3d(0, -100%, 0) rotateX(-120deg); 
    top: 0; 
} 
.carousel.vertical .carousel-inner > .item.next.left, 
.carousel.vertical .carousel-inner > .item.prev.right, 
.carousel.vertical .carousel-inner > .item.active { 
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg); 
      transform: translate3d(0, 0, 0) rotateX(0deg); 
    top: 0; 
}