Transformation properties
In this topic, we will address the fundamental properties that enable the transformation of HTML elements using CSS.
Transformations are powerful and simple ways to alter the position, rotation, and scale of an element.
Translate
The translate property moves an element relative to its original position. For example, to shift an element to the right by 20 pixels, we use translateX(20px).
.transformar {
transform: translateX(20px);
}
Rotate
The rotate property allows rotating an element by specific degrees. To rotate an element by 45 degrees, we use rotate(45deg).
.transformar {
transform: rotate(45deg);
}
Scale
The scale property adjusts the size of an element. For example, to increase an element by 1.5 times, we use scale(1.5).
.transformar {
transform: scale(1.5);
}
Skew
The skew property tilts an element along the X and Y axes. To tilt an element horizontally, we use skewX(30deg).
.transformar {
transform: skewX(30deg);
}
By understanding these properties, you will have the power to create dynamic animations and transform the appearance of elements on your web pages in an intuitive and effective way.
