- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - scale()
The scale() function in CSS is used to apply a scaling transformation (resizing) to an element on the two-dimensional plane. The function can resize the element horizontally and vertically at different scales, as the amount of scaling is defined by a vector [sx, sy]. The result is a <transform-function> datatype.
The scaling transformation is determined by a two-dimensional vector, whose coordinates specify how much scaling or resizing will be done in each direction.
The scaling will be uniform (isotropic) and the aspect ratio of the element will be preserved, when both the coordinates are equal. This form of scaling transformation is known as homothetic transformation.
In case the coordinate value is outside the [-1, 1] range, the element will grow in the dimension that is specified.
In case the coordinate value is inside the [-1, 1] range, the element will shrink in the dimension that is specified.
In case the coordinate value is negative, it results in point reflection in the specified dimension.
When the value is 1, it has no effect in the size of the element.
Scaling using the scale() function can only be done in a two-dimensional plane. In order to attain scaling in a three-dimensional plane, you need to use the scale3d() function.
Possible values
The function scale() can accept one or two values as parameter(s), that represents the amount of scaling to be applied in each direction.
sx: It is a <number> or <percentage> value that represents the abscissa (horizontal, x-coordinate) of the scaling vector.
sy: It is a <number> or <percentage> value that represents the ordinate (vertical, y-coordinate) of the scaling vector. When no value is specified for sy it defaults to the value of sx, which results in uniform scaling, preserving the element's aspect ratio.
Syntax
transform: scale(sx) | scale(sx, sy);
Accessibility concerns: The resizing or scaling of animations on a website is a problematic case for the user interface. So in case you want to include the scaling of animations on yur webpage, a control to the users be provided so that they can turn off the animations.
CSS scale() - Scaling the X and Y Dimensions Together
Following is an example where X and Y dimensions are passed together in the scale() function, where scale(0.6) is equivalent to scaleX(0.6) scaleY(0.6):
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scale-single-value { background-color: pink; } #xy:hover { transform: scale(0.6); } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>scale(0.6)</p> <div id="xy" class="scale-single-value"></div> </section> </body> </html>
CSS scale() - Scaling X and Y Dimensions Separately
In the following example the X and Y dimensions are passed separately, where scale(0.5, 0.8) is equivalent to scaleX(0.5) scaleY(0.8) and tranform-origin is set to right
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scale-double-value { background-color: lightgreen; } #x-y:hover { transform: scale(0.5, 0.8); transform-origin: right; } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>scale(0.5, 0.8)</p> <div id="x-y" class="scale-double-value"></div> </section> </body> </html>
To Continue Learning Please Login
Login with Google