Transition & Transform

twigwind provides utilities for transitions and transforms.

Transition

Twigwind utilities to control the timing and easing of CSS transitions using the transition: prefix followed by - signs for spaces.

💡 Tip: You can add multiple transistion properties

Example


<div class="bg-purple p-10 transition:all-500-ease hover:bg-pink">hover me</div>

will be complied into


background-color: #7b2ff7;
padding: 10px;
transition: all 500ms ease;

Transform

Twigwind provides utilities for CSS transforms including translation, rotation, scaling, and skewing. Use the following functions with the prefix transform:

translate- for moving elements along the X and Y axes
rotate- for rotating elements
scale- for scaling elements up or down
skew- for skewing elements along the X and Y axes

💡 Note: use multiple transform functions for complex effects.

Example


<div class="bg-blue p-10 transform:translate-20px-10px transform:rotate-15 transform:scale-1.5 transform:skew-10px-5px">Transformed</div>

will be complied into


bg-blue { background-color: #1e90ff; }
p-10 { padding: 10px; }
transform: translate(20px, 10px) rotate(15deg) scale(1.5) skew(10px, 5px);