scale
Các tiện ích để thu phóng các phần tử.
| Class | Styles |
|---|---|
scale-none | scale: none; |
scale-<number> | scale: <number>% <number>%; |
-scale-<number> | scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) | scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] | scale: <value>; |
scale-x-<number> | scale: <number>% var(--tw-scale-y); |
-scale-x-<number> | scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) | scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] | scale: <value> var(--tw-scale-y); |
scale-y-<number> | scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> | scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) | scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] | scale: var(--tw-scale-x) <value>; |
scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) | scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] | scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
Ví dụ
Ví dụ cơ bản
Sử dụng các tiện ích scale-<number> như scale-75 và scale-150 để thu phóng một phần tử theo tỷ lệ phần trăm kích thước ban đầu của nó:
scale-75
scale-100
scale-125
<img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />Thu phóng trên trục x
Sử dụng các tiện ích scale-x-<number> như scale-x-75 và -scale-x-150 để thu phóng một phần tử trên trục x theo tỷ lệ phần trăm chiều rộng ban đầu của nó:
scale-x-75
scale-x-100
scale-x-125
<img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />Thu phóng trên trục y
Sử dụng các tiện ích scale-y-<number> như scale-y-75 và scale-y-150 để thu phóng một phần tử trên trục y theo tỷ lệ phần trăm chiều cao ban đầu của nó:
scale-y-75
scale-y-100
scale-y-125
<img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />Sử dụng giá trị âm
Sử dụng các tiện ích -scale-<number>, -scale-x-<number> hoặc -scale-y-<number> như -scale-x-75 và -scale-125 để lật và thu nhỏ một phần tử theo tỷ lệ phần trăm kích thước ban đầu của nó:
-scale-x-75
-scale-100
-scale-y-125
<img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />Sử dụng giá trị tùy chỉnh
Use the scale-[<value>] syntax to set the scale based on a completely custom value:
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />For CSS variables, you can also use the scale-(<custom-property>) syntax:
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />This is just a shorthand for scale-[var(<custom-property>)] that adds the var() function for you automatically.
Áp dụng khi rê chuột
Prefix a scale utility with a variant like hover:* to only apply the utility in that state:
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />Learn more about using variants in the variants documentation.