The transform attribute transforms an element in 2D or 3D space. <\/p>\n\n\n\n
![\"\"](\"https:\/\/lh5.googleusercontent.com\/UTKXMlqEX3GqtKTjqXC8hPkeM2DyYrQcdlDFa_8hOn5DJnqyLYKCUzLWO6W3EIxBHHYSJgKSB2LdlrQgtSKpSsl5fBu0BsZ6MWhvJtamnIRDhTHHFXgsnwn_no_pl_ttbHoT7WAR\")
<\/figure><\/div>\n\n\n\nEven if a height and width are specified, this element will now be scaled to twenty times its original size.<\/p>\n\n\n\n
If you provide this function with two values, the first will extend it horizontally and the second will stretch it vertically. In the following example, the element will be twice the width but half the height of the original.<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh5.googleusercontent.com\/6cR16o4acOUeAaSvLKDGDGvv40Utnlu6D7v0eGffp48rROncw2r2XhMmrkW0KV2c0lSKTyncnIpHCEFZoIKbrXM_S9Rbc9yxj4t6ZfvoqBfJOQZS4Q0m9pnx2xmXup-h4h2rbjn4\")
<\/figure><\/div>\n\n\n\nCSS Transform Values <\/h2>\n\n\n\n- CSS Transform Scale()<\/li><\/ul>\n\n\n\n
This function Affects the element’s size. This also applies to an element’s font size, padding, height, and width. It also serves as a shortcut for the scaleX and scaleY operations.<\/p>\n\n\n\n
- SkewX() and SkewY()<\/li><\/ul>\n\n\n\n
This function Tilts an element to the left or right, similar to converting a rectangle to a parallelogram. The skew X and skew Y transform functions tilt an element one way or the other. Also, there is no shorthand property for skewing an element, so you\u2019ll need to use both functions.<\/p>\n\n\n\n
- Translate()<\/li><\/ul>\n\n\n\n
This transform function moves an element sideways, or up and down. It\u2019s important to note that an element using transform will not cause other elements to flow around it<\/p>\n\n\n\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-881.png\")
<\/figure><\/div>\n\n\n\n- Rotate()<\/li><\/ul>\n\n\n\n
The element is rotated clockwise from its present location. A positive value rotates an element clockwise from its initial location, whereas a negative value rotates it in the opposite way.<\/p>\n\n\n\n
- Matrix()<\/li><\/ul>\n\n\n\n
A function that combines all transformations into one and is presumably not intended to be written by hand.<\/p>\n\n\n\n
- Perspective()<\/li><\/ul>\n\n\n\n
This function has no effect on the element itself, but it does alter the 3D transformations of descendant elements, letting them all have a consistent depth perspective.<\/p>\n\n\n\n
See Also: Rotate HTML Elements Using CSS Transform<\/a><\/strong><\/p>\n\n\n\nCSS Transform Scale<\/h2>\n\n\n\n
The CSS transform scale () method specifies a transformation that resizes a 2D planar element. It may resize the horizontal and vertical dimensions at different scales since the quantity of scaling is determined by a vector. It yields a <transform-function> data type as a result.<\/p>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/kntWg65r-KKzLNnN5ok_WdaxDOLl0jb-50jrZCKGMT-Ss0CpONrJ2Dq76ATZg_Vmnpr71JBZ2Nz89xn9uK2O_rGfVc4F9a6LwazQ5Biog10ml3C8QOdsw6veUe_MDrqAP8UBL_yb\")
<\/figure><\/div>\n\n\n\nA two-dimensional vector characterizes this scaling change. Its coordinates specify how much scaling is performed in each direction. If both coordinates are the same, the scaling is uniform (isotropic), and the element’s aspect ratio is retained (this is a homothetic transformation).<\/p>\n\n\n\n
When a coordinate value is outside the [-1, 1] range, the element expands along that dimension; when it is inside, it contracts. If the value is negative, the outcome is a point reflection in that dimension. A value of 1 has no meaning.<\/p>\n\n\n\n
The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.<\/p>\n\n\n\n
The scale() method takes one or two arguments, which specify the amount of scaling to be done in each direction. I.e., Scale (sx) and Scale (sx, sy).<\/p>\n\n\n\n
See Also: Manipulate Capitalization Using CSS\u2019s Text-Transform<\/a><\/strong><\/p>\n\n\n\nScale Values<\/h2>\n\n\n\n- SX : <A number> or <percentage> expressing the scaling vector’s abscissa.<\/li><\/ul>\n\n\n\n
- SY : A <integer> or <percentage> expressing the scaling vector’s ordinate. If it is not defined, the default value is sx, which results in uniform scaling that retains the aspect ratio of the element.<\/li><\/ul>\n\n\n\n
Scaling\/zooming animations are troublesome for accessibility since they are atypical migraine triggers. If you must include such animations on your website, give an option that allows visitors to turn them off, ideally site-wide.<\/p>\n\n\n\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-883.png\")
<\/figure><\/div>\n\n\n\nConsider using the prefers-reduced-motion media feature to create a media query that disables animations if the user has a reduced animation set in their system options.<\/p>\n\n\n\n
See Also: Making Animations with CSS3 Transitions and Transform Features<\/a><\/strong><\/p>\n\n\n\nMultiple Values to CSS Transform<\/h2>\n\n\n\n
You may add several values to the transform property using a space-separated list.<\/p>\n\n\n\n![\"css](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2022\/04\/Screenshot-884.png\")
<\/figure>\n\n\n\nIt’s important noting that these transformations are executed in a certain order; in the example above, ‘skew’ is performed first, followed by the element being scaled.<\/p>\n\n\n\n
See Also: Responsive CSS Transitions: Tips and Tricks<\/a><\/strong><\/p>\n\n\n\nMatrix Transform<\/h2>\n\n\n\n
All transformations may be combined using the matrix transform function. It’s similar to transform shorthand, but I don’t think it’s meant to be written by hand. There are tools available that can turn a collection of transforms into a single matrix declaration, such as The Matrix Resolutions. In certain cases, this may reduce file size, but author-unfriendly micro improvements like that are unlikely to be worth your effort.<\/p>\n\n\n\n
See Also: 5 Advanced CSS techniques to master in 2021<\/a><\/strong><\/p>\n
This function Affects the element’s size. This also applies to an element’s font size, padding, height, and width. It also serves as a shortcut for the scaleX and scaleY operations.<\/p>\n\n\n\n
- SkewX() and SkewY()<\/li><\/ul>\n\n\n\n
This function Tilts an element to the left or right, similar to converting a rectangle to a parallelogram. The skew X and skew Y transform functions tilt an element one way or the other. Also, there is no shorthand property for skewing an element, so you\u2019ll need to use both functions.<\/p>\n\n\n\n
- Translate()<\/li><\/ul>\n\n\n\n
This transform function moves an element sideways, or up and down. It\u2019s important to note that an element using transform will not cause other elements to flow around it<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n- Rotate()<\/li><\/ul>\n\n\n\n
The element is rotated clockwise from its present location. A positive value rotates an element clockwise from its initial location, whereas a negative value rotates it in the opposite way.<\/p>\n\n\n\n
- Matrix()<\/li><\/ul>\n\n\n\n
A function that combines all transformations into one and is presumably not intended to be written by hand.<\/p>\n\n\n\n
- Perspective()<\/li><\/ul>\n\n\n\n
This function has no effect on the element itself, but it does alter the 3D transformations of descendant elements, letting them all have a consistent depth perspective.<\/p>\n\n\n\n
See Also: Rotate HTML Elements Using CSS Transform<\/a><\/strong><\/p>\n\n\n\n
CSS Transform Scale<\/h2>\n\n\n\n
The CSS transform scale () method specifies a transformation that resizes a 2D planar element. It may resize the horizontal and vertical dimensions at different scales since the quantity of scaling is determined by a vector. It yields a <transform-function> data type as a result.<\/p>\n\n\n\n
A two-dimensional vector characterizes this scaling change. Its coordinates specify how much scaling is performed in each direction. If both coordinates are the same, the scaling is uniform (isotropic), and the element’s aspect ratio is retained (this is a homothetic transformation).<\/p>\n\n\n\n
When a coordinate value is outside the [-1, 1] range, the element expands along that dimension; when it is inside, it contracts. If the value is negative, the outcome is a point reflection in that dimension. A value of 1 has no meaning.<\/p>\n\n\n\n
The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.<\/p>\n\n\n\n
The scale() method takes one or two arguments, which specify the amount of scaling to be done in each direction. I.e., Scale (sx) and Scale (sx, sy).<\/p>\n\n\n\n
See Also: Manipulate Capitalization Using CSS\u2019s Text-Transform<\/a><\/strong><\/p>\n\n\n\n
Scale Values<\/h2>\n\n\n\n
- SX : <A number> or <percentage> expressing the scaling vector’s abscissa.<\/li><\/ul>\n\n\n\n
- SY : A <integer> or <percentage> expressing the scaling vector’s ordinate. If it is not defined, the default value is sx, which results in uniform scaling that retains the aspect ratio of the element.<\/li><\/ul>\n\n\n\n
Scaling\/zooming animations are troublesome for accessibility since they are atypical migraine triggers. If you must include such animations on your website, give an option that allows visitors to turn them off, ideally site-wide.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nConsider using the prefers-reduced-motion media feature to create a media query that disables animations if the user has a reduced animation set in their system options.<\/p>\n\n\n\n
See Also: Making Animations with CSS3 Transitions and Transform Features<\/a><\/strong><\/p>\n\n\n\n
Multiple Values to CSS Transform<\/h2>\n\n\n\n
You may add several values to the transform property using a space-separated list.<\/p>\n\n\n\n
<\/figure>\n\n\n\nIt’s important noting that these transformations are executed in a certain order; in the example above, ‘skew’ is performed first, followed by the element being scaled.<\/p>\n\n\n\n
See Also: Responsive CSS Transitions: Tips and Tricks<\/a><\/strong><\/p>\n\n\n\n
Matrix Transform<\/h2>\n\n\n\n
All transformations may be combined using the matrix transform function. It’s similar to transform shorthand, but I don’t think it’s meant to be written by hand. There are tools available that can turn a collection of transforms into a single matrix declaration, such as The Matrix Resolutions. In certain cases, this may reduce file size, but author-unfriendly micro improvements like that are unlikely to be worth your effort.<\/p>\n\n\n\n
See Also: 5 Advanced CSS techniques to master in 2021<\/a><\/strong><\/p>\n
- SY : A <integer> or <percentage> expressing the scaling vector’s ordinate. If it is not defined, the default value is sx, which results in uniform scaling that retains the aspect ratio of the element.<\/li><\/ul>\n\n\n\n
- SX : <A number> or <percentage> expressing the scaling vector’s abscissa.<\/li><\/ul>\n\n\n\n
- Perspective()<\/li><\/ul>\n\n\n\n
- Matrix()<\/li><\/ul>\n\n\n\n
- Rotate()<\/li><\/ul>\n\n\n\n
- Translate()<\/li><\/ul>\n\n\n\n