Enhanced Bootstrap Transform origin

Effects modifiers Transform origin PRO

Set the origin of the effect transformation

Overview

Effects such as Grow & Shrink, Flip, Turn or any Custom effect that uses CSS transform has a center transform origin by default. It means that the element is transforming, for example rotating, around its center.

Syntax

Add origin-{top|right|bottom|right} into data-fx to change the transform origin.

Examples

Hover over the blue element to see the transform origin in action.

01
02
03
04
05
<div data-fx="hover:turn[90deg]">01</div>
<div data-fx="hover:turn[90deg] origin-top">02</div>
<div data-fx="hover:turn[90deg] origin-right">03</div>
<div data-fx="hover:turn[90deg] origin-bottom">04</div>
<div data-fx="hover:turn[90deg] origin-left">05</div>

You can even combine them to achieve the desired behavior.

01
02
03
04
05
<div data-fx="hover:turn[90deg]">01</div>
<div data-fx="hover:turn[90deg] origin-top origin-left">02</div>
<div data-fx="hover:turn[90deg] origin-top origin-right">03</div>
<div data-fx="hover:turn[90deg] origin-bottom origin-right">04</div>
<div data-fx="hover:turn[90deg] origin-bottom origin-left">05</div>