Bootstrap旋转木马缩放转换

问题描述：

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

我试图改变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事件occures下一张幻灯片已经是活跃的一个，我想切换到另一个传送带的幻灯片之前的变焦效果。

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

我该如何做到这一点？

答

这里是你需要的东西：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); 
}

享受;）

Bootstrap旋转木马缩放转换

相关推荐