Tailwind CSS Transforms

Scale

https://tailwindcss.com/docs/scale

Class	transform
scale-0	scale(0)
scale-x-0	scaleX(0)
scale-y-0	scaleY(0)
scale-50	scale(.5)
scale-x-100	scaleX(1)
scale-y-150	scaleY(1.5)

scale-75

scale-100

scale-125

scale-0

scale-x-50

scale-y-50

<img class="scale-75 ...">
<img class="scale-100 ...">
<img class="scale-125 ...">

<img class="scale-0 ...">
<img class="scale-x-50 ...">
<img class="scale-y-50 ...">

 

Rotate

https://tailwindcss.com/docs/rotate

Class	transform
rotate-0	rotate(0deg)
rotate-1	rotate(1deg)
rotate-45	rotate(45deg)
rotate-90	rotate(90deg)
rotate-180	rotate(180deg)

rotate-0

rotate-45

rotate-90

rotate-180

<img class="rotate-0 ...">
<img class="rotate-45 ...">
<img class="rotate-90 ...">
<img class="rotate-180 ...">

 

Translate

https://tailwindcss.com/docs/translate

Class	transform
translate-x-0	translateX(0px)
translate-y-0	translateY(0px)
translate-x-px	translateX(1px)
translate-y-1	translateY(0.25rem)
translate-x-2.5	translateX(0.625rem)
translate-y-4	translateY(1rem)
translate-x-full	translateX(100%)
translate-y-1/2	translateY(50%)

translate-y-6

-translate-y-6

translate-x-6

<img class="translate-y-6 ...">
<img class="-translate-y-6 ...">
<img class="translate-x-6 ...">

 

Skew

https://tailwindcss.com/docs/skew

Class	transform
skew-x-0	skewX(0deg)
skew-y-1	skewY(1deg)
skew-x-3	skewX(3deg)
skew-y-6	skewY(6deg)
skew-x-12	skewX(12deg)

skew-y-0

skew-y-3

skew-y-6

skew-y-12

skew-x-0

skew-x-3

skew-x-6

skew-x-12

<img class="skew-y-0 ...">
<img class="skew-y-3 ...">
<img class="skew-y-6 ...">
<img class="skew-y-12 ...">

<img class="skew-x-0 ...">
<img class="skew-x-3 ...">
<img class="skew-x-6 ...">
<img class="skew-x-12 ...">

 

Transform Origin

https://tailwindcss.com/docs/transform-origin

Class	transform-origin
origin-center	center
origin-top	top
origin-top-right	top right
origin-right	right
origin-bottom-right	bottom right
origin-bottom	bottom
origin-bottom-left	bottom left
origin-left	left
origin-top-left	top left

origin-center

origin-top-left

origin-bottom

origin-origin-bottom-left

origin-left

origin-bottom-right

<img class="origin-center rotate-45 ...">
<img class="origin-top-left rotate-45 ...">
<img class="origin-bottom rotate-45 ...">

<img class="origin-bottom-left rotate-45 ...">
<img class="origin-left rotate-45 ...">
<img class="origin-bottom-right rotate-45 ...">

 

이미지 출처 : https://picsum.photos/500/500