Transform
The transform classes are made to let you custom any element placement or style in different unique ways.
Flip elements
The flip classes allow to turn any element around using a transform property.
| Class | Effect |
|---|---|
| Normal behavior |
Random reversed element
|
.flip-v
|
Random reversed element
|
.flip-h
|
Random reversed element
|
.flip-vh
|
Random reversed element
|
Scale elements
You can either scale up or down any element size.
To do so, use the .scale-up{scale-number} and
.scale-down{scale-number} classes where scale-number can be :
Scaled down element
Scaled up element
Scale up
| Class | Effect |
|---|---|
.scale-up1
|
transform: scale(1.1)
|
.scale-up2
|
transform: scale(1.2)
|
.scale-up3
|
transform: scale(1.3)
|
.scale-up4
|
transform: scale(1.4)
|
.scale-up5
|
transform: scale(1.5)
|
.scale-up6
|
transform: scale(1.6)
|
.scale-up7
|
transform: scale(1.7)
|
.scale-up8
|
transform: scale(1.8)
|
.scale-up9
|
transform: scale(1.9)
|
Scale down
| Class | Effect |
|---|---|
.scale-down1
|
transform: scale(0.9)
|
.scale-down2
|
transform: scale(0.8)
|
.scale-down3
|
transform: scale(0.7)
|
.scale-down4
|
transform: scale(0.6)
|
.scale-down5
|
transform: scale(0.5)
|
.scale-down6
|
transform: scale(0.4)
|
.scale-down7
|
transform: scale(0.3)
|
.scale-down8
|
transform: scale(0.2)
|
.scale-down9
|
transform: scale(0.1)
|
