CODEWITHSUNDEEP
csstwitter-bootstrapcarouselcss-transforms
kenshin23
kenshin23

Reputation: 129

Vertically-rotating 3D Bootstrap carousel

I would like to extend Bootstrap's carousel so that it has a rotating effect similar to these examples:

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

I've tried to use this vertical bootstrap slider as an example, as it seems to have the CSS I need:

https://codepen.io/danbhala/pen/eNZrQW/

However, so far I've only managed to get the inactive items (or rather, their contents) to scale, rather than rotate around the Y axis, even when using these CSS rules:

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

Is there any way to achieve the same effect, regardless of the number of slides?

Upvotes: 0

Views: 1658

Answers (1)

kenshin23
kenshin23

Reputation: 129

The answer was actually really simple -- I had the rotating axis wrong:

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

Upvotes: 1

Related Questions