Transform Helpers

Collection of helpers for setting transition of elements. These variables can be mixed so get creative!

--translatey

The --translatey helper set the transform: tansitionY() property allowing you to transform an element on the vertical axis.

<div style="--translatey:0px;"> ... </div>

--translatey-hvr

The --translatey-hvr helper set the transform: tansitionY() property allowing you to transform an element on the vertical axis on hover.

<div style="--translatey-hvr:-30px;"> ... </div>

--translatex

The --translatex helper set the transform: tansitionX() property allowing you to transform an element on the vertical axis.

<div style="--translatex:0px;"> ... </div>

--translatex-hvr

The --translatex-hvr helper set the transform: tansitionX() property allowing you to transform an element on the vertical axis on hover.

<div style="--translatex-hvr:-25px;"> ... </div>

--scale

The --scale helper set the transform: scale() property allowing you to transform an element scale.

<div style="--scale:100%;"> ... </div>

--scale-hvr

The --scale-hvr helper set the transform: scale() property allowing you to transform an element scale on hover.

<div style="--scale-hvr:75%;"> ... </div>

--rotate

The --rotate helper set the transform: rotate() property allowing you to transform an element rotation.

<div style="--rotate:0deg;"> ... </div>

--rotate-hvr

The --rotate-hvr helper set the transform: rotate() property allowing you to transform an element rotate on hover.

<div style="--rotate-hvr:30deg;"> ... </div>

--skew

The --skew helper set the transform: skew() property allowing you to transform an element rotation.

<div style="--skew:0deg;"> ... </div>

--skew-hvr

The --skew-hvr helper set the transform: skew() property allowing you to transform an element skew on hover.

<div style="--skew-hvr:30deg;"> ... </div>