垂直旋转3D Bootstrap轮播

时间:2017-06-05 06:07:31

标签: css twitter-bootstrap carousel css-transforms

我想扩展Bootstrap的旋转木马,使其具有类似于这些示例的旋转效果:

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

无论幻灯片数量多少,有没有办法达到同样的效果?

1 个答案:

答案 0 :(得分: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;
}