Css 垂直旋转3D引导转盘

我想扩展Bootstrap的旋转木马，使其具有类似以下示例的旋转效果：

我尝试使用这个垂直引导滑块作为示例，因为它似乎具有我需要的CSS：

但是，到目前为止，我只成功地使非活动项（或者更确切地说，它们的内容）按比例缩放，而不是绕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;
}

---

不管幻灯片的数量有多少，有没有办法达到同样的效果？

答案其实很简单——我的旋转轴错了：

例如：

.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;
}