KandZ – Tuts

We like to help…!

CSS 49 💻 transform scale and scale3d

a - transform scale
transform scale allows you to resize an element
It maintains its aspect ratio
syntax: scale(s) or scale(s1, s2)
values: number, percentage. If only 's' defined it scales it uniformly
if s1 and s2 defined the s1 scales horizontal and s2 vertical
transform: scale(1.5); → scales up the box 1.5 times its original size
transform: scale(1.5, 2); → scales up the box horizontally 1.5 times and vertically 2 times

b - transform scale3d
transform scale3d allows you to scale an element in three dimensions...
along x-axis, y-axis and z-axis
It is useful for creating 3D effects
syntax: scale3d(s1, s2, s3)
values: s1 → horizontal scale, x
s2 → vertical scale, y s3 → depth scale, z
transform: scale3d(1.5, 1.5, 2);

Leave a Reply