{"id":356331,"date":"2021-11-10T14:35:45","date_gmt":"2021-11-10T22:35:45","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=356331"},"modified":"2021-11-10T14:39:04","modified_gmt":"2021-11-10T22:39:04","slug":"scale","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","title":{"rendered":"scale"},"content":{"rendered":"\n

The scale<\/code> property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2<\/code> doubles the dimensions to 200 pixels square. Similarly, a scale value of .5<\/code> decreases the dimensions in half, resulting in 50 pixels square.<\/p>\n\n\n\n

.element {\n  width: 20px;\n  height: 20px;\n  scale: 2; \/* Results in 40 pixels square *\/\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
There just so happens to be another way to scale elements, using the scale()<\/code> function on the transform<\/code><\/a> property, \u00e1 la:<\/p>\n\n\n\n
.element {\n  width: 20px;\n  height: 20px;\n  transform: scale(2); \/* Results in 40 pixels square *\/\n}<\/code><\/pre>\n\n\n\n
\u2026the CSS scale<\/code> property does it independently of the transform<\/code> property, giving us a little extra flexibility to scale things without having to chain the effect with other transforms.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
scale: none | <number>{1,3};<\/code><\/pre>\n\n\n\n
The scale<\/code> property accepts the none<\/code> keyword, or up to three numeric values. A single numeric value scales the element along the X (horizontal) and Y (vertical) axes by the same value. If two values are provided, the first one scales the X-axis and the second scales the Y-axis. If three values are provided, the third value corresponds to the Z-axis, which scales the element\u2019s depth in a 3D context (it happens to be the equivalent of using transform: scale3d()<\/code>.<\/p>\n\n\n\n
  • Initial: none<\/code><\/li>
  • Applies to: transformable elements<\/li>
  • Inherited: no<\/li>
  • Computed value: as specified<\/li>
  • Animation type: a transform<\/li>
  • Creates stacking context: yes<\/li><\/ul>\n\n\n
    Values<\/h3>\n\n\n
    \/* Keyword values *\/\nscale: none;\n\n\/* Single values *\/\nscale: 2;\nscale: 0.25;\n\n\/* Two values *\/\nscale: 2 1;\n\n\/* Three values *\/\nscale: 1 1.5 2;\n\n\/* Global values *\/\nscale: inherit;\nscale: initial;\nscale: revert;\nscale: unset;<\/code><\/pre>\n\n\n\n
    • none<\/code>:<\/strong> This means there\u2019s no scaling applied to the element; effectively the same as scale: 1<\/code>.<\/li>
    • <number>{1,3}<\/code>:<\/strong> This says the property accepts up to three values that are used to multiply the element\u2019s dimensions.<\/li><\/ul>\n\n\n
      Scaling does not distort the natural layout flow<\/h3>\n\n\n
      It is important to know that the scale<\/code> property does not cause other elements to flow around it like the scale()<\/code> transform function does. That means an element\u2019s scale does not result in the elements around it reflowing in order to make additional (or less) room available based on the scale of that element.<\/p>\n\n\n\n