CSS 2D Transforms
CSS 2D Transforms
By applying transforms, you can rotate, scale, skew, and translate elements, allowing for dynamic and engaging visual effects on your web pages. These transformations are done using the transform property, which can take multiple functions, such as rotate() , scale() , translate() , and skew(), to create sophisticated layouts and animations with ease.
rotate
The rotate() transform rotates an element around a fixed point. It takes an angle as an argument, which can be expressed in degrees (deg), radians (rad), or gradians (grad).
transform: rotate(45deg); /* Rotate 45 degrees clockwise */translate
The translate() transform moves an element along the x-axis and y-axis. It takes two arguments: the horizontal displacement (x) and the vertical displacement (y).
transform: translate(100px, 50px); /* Move 100px right and 50px down */scale
The scale() transform changes the size of an element. It takes two arguments: the horizontal scaling factor (x) and the vertical scaling factor (y).
transform: scale(2, 1); /* Double the width, keep the height the same */skew
The skew() transform skews an element along the x-axis and y-axis. It takes two arguments: the horizontal skewing angle (x) and the vertical skewing angle (y).
transform: skew(30deg, 20deg); /* Skew 30 degrees horizontally and 20 degrees vertically */Do You Know?
You can combine multiple transforms by separating them with spaces.
Avoid This
Overusing transforms can negatively impact performance.
Important Note
The transform origin property determines the point around which transforms are applied. The default value is center.
Summary
- CSS 2D Transforms allow you to rotate, translate, scale, and skew elements.
- Transforms are applied in the order they are specified.
- The transform origin property controls the point around which transforms are applied.