垂直旋转的3D bootstrap轮播

Question

我想扩展Bootstrap的轮播，以便它具有类似于这些示例的旋转效果：

https://desandro.github.io/3dtransforms/docs/carousel.htmlhttps://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;
}