Modifiers Transform origin

Set the origin of the effect transformation

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 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-tor="hover:rotate.to(90deg)">01</div>
<div data-tor="hover:rotate.to(90deg) origin.top">02</div>
<div data-tor="hover:rotate.to(90deg) origin.right">03</div>
<div data-tor="hover:rotate.to(90deg) origin.bottom">04</div>
<div data-tor="hover:rotate.to(90deg) origin.left">05</div>

You can even combine them to achieve the desired behavior.

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