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>