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-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-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.
01
02
03
04
05
<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>