垂直旋转的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; 
}