While working on customizing the bootstrap carousel, I came across this code snippet:
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
Initially, it seemed unnecessary as bootstrap carousel doesn't have 3D effects. However, if we intend to add custom 3D effects to the carousel slides, then using perspective becomes essential. But remember, perspective should be applied to the parent element and not directly to the one with 3D effects. In my customization work, I found that setting
.carousel-inner { perspective: 1000 }.items to have 3D effects.
So the question arises:
- Why does the carousel item in bootstrap use a perspective of 1000?