垂直旋转的 3D Bootstrap 旋转木马答案

【问题标题】：Vertically-rotating 3D Bootstrap carousel垂直旋转的 3D Bootstrap 旋转木马
【发布时间】：2017-06-05 06:07:31
【问题描述】：

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

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

我尝试使用这个垂直引导滑块作为示例，因为它似乎有我需要的 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;
}

有没有什么方法可以达到同样的效果，不管幻灯片的数量是多少？

【问题讨论】：

标签： css twitter-bootstrap carousel css-transforms

【解决方案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;
}

【讨论】：