Transform & Transition

Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.

Transform Rotate

Preview
HTML

Rotate 15 deg

Rotate 30 deg

Rotate 45 deg

Rotate 90 deg

Rotate -15 deg

Rotate -30 deg

Rotate -45 deg

Rotate -90 deg

                
                  <img class="img-fluid transform-rotate-15" src="..." alt="...">
                  <img class="img-fluid transform-rotate-30" src="..." alt="...">
                  <img class="img-fluid transform-rotate-45" src="..." alt="...">
                  <img class="img-fluid transform-rotate-90" src="..." alt="...">
                  <img class="img-fluid transform-rotate-180" src="..." alt="...">
                  <img class="img-fluid transform-rotate-270" src="..." alt="...">

                  <!-- Negative -->
                  <img class="img-fluid transform-rotate-n15" src="..." alt="...">
                  <img class="img-fluid transform-rotate-n30" src="..." alt="...">
                  <img class="img-fluid transform-rotate-n45" src="..." alt="...">
                  <img class="img-fluid transform-rotate-n90" src="..." alt="...">
                  <img class="img-fluid transform-rotate-n180" src="..." alt="...">
                  <img class="img-fluid transform-rotate-n270" src="..." alt="...">

Transform Flip

Preview
HTML

Normal

Flip X

Flip Y

                
                   <img class="transform-flip-x" src="..." alt="...">
                   <img class="transform-flip-y" src="..." alt="...">

Hover : Zoom

Hover : Top

Hover : Bottom

Hover : Show Text/Content

Lorem Ipsum

                
                  <!-- Hover : Zoom -->
                  <div class="rounded overflow-hidden">
                    <img class="img-fluid transition-zoom-hover" src="..." alt="...">
                  </div>
                    
                  <!-- Hover : Top -->
                  <img class="img-fluid rounded transition-top-hover" src="..." alt="...">

                  <!-- Hover : Bottom -->
                  <img class="img-fluid rounded transition-bottom-hover" src="..." alt="...">

                  <!-- Hover : Show Text/Content -->
                  <div class="overflow-hidden rounded ratio ratio-1x1 overlay-dark overlay-opacity-0 overlay-opacity-75-hover transition-zoom-content-hover transition-reveal-hover">
                    <span class="z-index-0 position-absolute-full transition-zoom-item bg-cover" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></span>
                    <div class="d-flex align-items-center justify-content-center position-absolute transition-reveal-item text-white">
                      <h4>Lorem Ipsum</h4>
                    </div>
                  </div>

Transform/Transition Utils

.transform-none cancel any transform
.transition-none cancel any transition

.transition-1 all .1s ease-in-out
.transition-2 all .2s ease-in-out
.transition-3 all .3s ease-in-out
.transition-4 all .4s ease-in-out
.transition-5 all .5s ease-in-out

.transition-top-hover .2rem to top animation
.transition-bottom-hover .2rem to bottom animation
.transition-zoom-hover hover zoom animation
.transition-zoom zoom (static)