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

享受;）

Bootstrap轮播变焦过渡

1 个答案: