Scale
Below, utility classes to apply transform
property.
Class | Properties |
---|---|
.scale-0 | transform: scale(0); |
.scale-25 | transform: scale(0.25); |
.scale-50 | transform: scale(0.5); |
.scale-75 | transform: scale(0.75); |
.scale-100 | transform: scale(1); |
.scale-125 | transform: scale(1.25); |
.scale-150 | transform: scale(1.5); |
.scale-x-0 | transform: scaleX(0); |
.scale-x-25 | transform: scaleX(0.25); |
.scale-x-50 | transform: scaleX(0.5); |
.scale-x-75 | transform: scaleX(0.75); |
.scale-x-100 | transform: scaleX(1); |
.scale-x-125 | transform: scaleX(1.25); |
.scale-x-150 | transform: scaleX(1.5); |
.scale-y-0 | transform: scaleY(0); |
.scale-y-25 | transform: scaleY(0.25); |
.scale-y-50 | transform: scaleY(0.5); |
.scale-y-75 | transform: scaleY(0.75); |
.scale-y-100 | transform: scaleY(1); |
.scale-y-125 | transform: scaleY(1.25); |
.scale-y-150 | transform: scaleY(1.5); |
Example(s)
html
<div class="scale-25 ..."></div>
<div class="scale-50 ..."></div>
<div class="scale-75 ..."></div>
<div class="scale-100 ..."></div>
<div class="scale-125 ..."></div>
<div class="scale-150 ..."></div>