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事件occures下一張幻燈片已經是活躍的一個，我想切換到另一個傳送帶的幻燈片之前的變焦效果。

也許在下一張幻燈片顯示之前觸發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); 
} 

享受;）