Tailwind Transition & Transform Generator
Interactive tool for CSS transitions and transforms with live preview.
- Home
- > Tailwind >
- Transition & Transform
Settings
50
60
70
80
90
100
110
120
130
140
150
160
170
180
190
200
-180
-165
-150
-135
-120
-105
-90
-75
-60
-45
-30
-15
0
15
30
45
60
75
90
105
120
135
150
165
180
-100
-90
-80
-70
-60
-50
-40
-30
-20
-10
0
10
20
30
40
50
60
70
80
90
100
-100
-90
-80
-70
-60
-50
-40
-30
-20
-10
0
10
20
30
40
50
60
70
80
90
100
Preview
Hover
Hover over the box to see the effect
Tailwind Classes
Equivalent CSS
How to Use
- Choose a trigger (hover, focus, active, or always-on).
- Select a transform type (scale, rotate, or translate) and adjust its value.
- Configure the transition property, duration, delay, and easing.
- Preview the effect live and copy the generated Tailwind classes or equivalent CSS.
