Overview

Effects such as Scale, Rotate 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-tor-fx to change the transform origin.

Examples

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

<div data-tor-fx="hover:rotate.to(90)">01</div>
<div data-tor-fx="hover:rotate.to(90) origin.top">02</div>
<div data-tor-fx="hover:rotate.to(90) origin.right">03</div>
<div data-tor-fx="hover:rotate.to(90) origin.bottom">04</div>
<div data-tor-fx="hover:rotate.to(90) origin.left">05</div>

You can even combine them to achieve the desired behavior.

<div data-tor-fx="hover:rotate.to(90)">01</div>
<div data-tor-fx="hover:rotate.to(90) origin.top origin.left">02</div>
<div data-tor-fx="hover:rotate.to(90) origin.top origin.right">03</div>
<div data-tor-fx="hover:rotate.to(90) origin.bottom origin.right">04</div>
<div data-tor-fx="hover:rotate.to(90) origin.bottom origin.left">05</div>