diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 405aee18cbc5..e754843167dd 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -30,13 +30,13 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.im
 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
 </div>
@@ -50,13 +50,13 @@ Adding in the previous and next controls:
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
@@ -83,13 +83,13 @@ You can also add the indicators to the carousel, alongside the controls, too.
   </ol>
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
     </div>
     <div class="carousel-item">
-      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+      <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
@@ -122,21 +122,21 @@ Add captions to your slides easily with the `.carousel-caption` element within a
     </ol>
     <div class="carousel-inner" role="listbox">
       <div class="carousel-item active">
-        <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
         <div class="carousel-caption d-none d-md-block">
           <h3>First slide label</h3>
           <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
       </div>
       <div class="carousel-item">
-        <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
         <div class="carousel-caption d-none d-md-block">
           <h3>Second slide label</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
       </div>
       <div class="carousel-item">
-        <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+        <img class="d-block w-100" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
         <div class="carousel-caption d-none d-md-block">
           <h3>Third slide label</h3>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 1b6e450ae2be..41eca949fb3a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -12,13 +12,11 @@
 .carousel-item {
   position: relative;
   display: none;
+  align-items: center;
   width: 100%;
-
-  @include if-supports-3d-transforms() {
-    @include transition($carousel-transition);
-    backface-visibility: hidden;
-    perspective: 1000px;
-  }
+  @include transition($carousel-transition);
+  backface-visibility: hidden;
+  perspective: 1000px;
 }
 
 .carousel-item.active,
@@ -34,21 +32,19 @@
 }
 
 // CSS3 transforms when supported by the browser
-@include if-supports-3d-transforms() {
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    transform: translate3d(0, 0, 0);
-  }
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+  transform: translate3d(0, 0, 0);
+}
 
-  .carousel-item-next,
-  .active.carousel-item-right {
-    transform: translate3d(100%, 0, 0);
-  }
+.carousel-item-next,
+.active.carousel-item-right {
+  transform: translate3d(100%, 0, 0);
+}
 
-  .carousel-item-prev,
-  .active.carousel-item-left {
-    transform: translate3d(-100%, 0, 0);
-  }
+.carousel-item-prev,
+.active.carousel-item-left {
+  transform: translate3d(-100%, 0, 0);
 }
 
 
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 13aad24875c4..cc3394f0a035 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -14,7 +14,6 @@
 @import "mixins/text-emphasis";
 @import "mixins/text-hide";
 @import "mixins/text-truncate";
-@import "mixins/transforms";
 @import "mixins/visibility";
 
 // // Components
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f517797faacc..d277011b213e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -904,7 +904,7 @@ $carousel-control-icon-width:                 20px !default;
 $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$carousel-transition:           transform .6s ease-in-out !default;
+$carousel-transition:           transform .6s ease !default;
 
 
 // Close
diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
deleted file mode 100644
index 4005c9d028d3..000000000000
--- a/scss/mixins/_transforms.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Applies the given styles only when the browser support CSS3 3D transforms.
-@mixin if-supports-3d-transforms() {
-  @media (-webkit-transform-3d) {
-    // Old Safari, Old Android
-    // http://caniuse.com/#feat=css-featurequeries
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
-    @content;
-  }
-
-  @supports (transform: translate3d(0,0,0)) {
-    // The Proper Way: Using a CSS feature query
-    @content;
-  }
-}