Bootstrap轮播缩放过渡

Question

我在Bootstrap轮播中有图像，作为过渡效果，我想缩放活动图像，然后显示下一张图像。 像这样-http://cssdeck.com/labs/solitary-css3-slider-zoom-transition ，但仅适用于活动幻灯片的缩放。

我试图更改Bootstrap的CSS，但这不会缩放活动幻灯片，而是缩放下一张幻灯片。

.carousel-inner .item{
  transition-property: transform;
  transform: scale(1);
}

.carousel-inner .item.active{
  transform: scale(1.5);
}

/* turning off the default transition effect */
.next,
.prev,
.active.left,
.active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

问题是，当slide.bs.carousel事件发生时，下一张幻灯片已经处于活动状态，并且我想要缩放效果，然后再切换到另一张幻灯片。

也许在下一张幻灯片显示之前用js触发效果会有所帮助。

我该如何实现？

Answer 1

这是您需要的： http : //codepen.io/statix/pen/dNLMXB

只需创建带有响应图像的轮播项目，然后进行此过渡：

.carousel-holder .carousel-item {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.carousel-holder .carousel-item .img-responsive {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    transform: perspective(100vw) translateZ(15vw);
    opacity: 0;
}

.carousel-holder .carousel-item.active .img-responsive {
    opacity: 1;
    transform: perspective(100vw) translateZ(0);
}

请享用 ;）