use @supports to apply transform3d to those who can do it, then provide a non-3d fallback to ie11

This commit is contained in:
Mark Otto 2017-06-30 17:35:02 -07:00 committed by Mark Otto
parent 7f6479b0d9
commit 2d4534e112
1 changed files with 15 additions and 3 deletions

View File

@ -34,17 +34,29 @@
// CSS3 transforms when supported by the browser
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translate3d(0, 0, 0);
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.active.carousel-item-right {
transform: translate3d(100%, 0, 0);
transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0);
}
}
.carousel-item-prev,
.active.carousel-item-left {
transform: translate3d(-100%, 0, 0);
transform: translateX(-100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0);
}
}