scale()
Published Jul 7, 2021Updated Sep 3, 2021
Contribute to Docs
Changes the size of an element to make it larger or smaller.
Syntax
transform: scale(<value>);
where a required <value>
can be one of the following:
- Number value:
.25
,1.5
- Percentage value:
25%
,150%
Note: A single value will be applied to the horizontal and vertical scale of an element. If a second value is provided, the first value will apply to the horizontal scale and the second value will apply to the vertical scale.
Example 1
Shrink the .avatar
element by 50%
:
.avatar {transform: scale(50%);}
Example 2
Grow the .avatar
element by 50%
horizontally and 100%
vertically:
.avatar {transform: scale(1.5, 2);}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours