CSS Transformations
â—‡ What are the CSS Transformations?
CSS transformations are a way of changing the appearance or position of the elements on the web page without affecting the layout of other elements. The transformations can be applied using the CSS "transform" property, allowing for effects such as scaling, rotating, skewing or translating (shifting) the elements.
â—‡ Why use transformations, and where?
Transformations can be used to create dynamic effects to enhance UX and interactivity of the website. For example, rotating a card, or having the buttons change size when hovered over. They involve less performance overhead than using JavaScript-based manipulations. They can also be combined to create more complex effects.
Translate
Shift the element to the right by 120 pixels and up by 50 percent of the height.
Skew
Tilt the element to the left by 15 degrees, or down by 15 degrees, or both at the same time.
Scale
Make the element twice as wide and half as tall.
Rotate
Rotate the element left or right by 45 degress (or, equivalently, by 1/8 of a turn).
Matrix
Combine transform: scale(2, 0.5); transform: skew(45deg, 0), and transform: translate(0px, 20px) into a single operation.