Propriedades de Transformação
Neste tópico, abordaremos as propriedades fundamentais que possibilitam a transformação de elementos HTML usando CSS.
As transformações são maneiras poderosas e simples de alterar a posição, rotação e escala de um elemento.
Translate (Transladar)
A propriedade translate move um elemento em relação à sua posição original. Por exemplo, para deslocar um elemento para a direita em 20 pixels, usamos translateX(20px).
.transformar {
transform: translateX(20px);
}
Rotate (Rotacionar)
A propriedade rotate permite girar um elemento em graus específicos. Para girar um elemento em 45 graus, utilizamos rotate(45deg).
.transformar {
transform: rotate(45deg);
}
Scale (Escalar)
A propriedade scale ajusta o tamanho de um elemento. Por exemplo, para aumentar um elemento em 1,5 vezes, utilizamos scale(1.5).
.transformar {
transform: scale(1.5);
}
Skew (Inclinar)
A propriedade skew inclina um elemento ao longo dos eixos X e Y. Para inclinar um elemento horizontalmente, usamos skewX(30deg).
.transformar {
transform: skewX(30deg);
}
Ao compreender essas propriedades, você terá o poder de criar animações dinâmicas e transformar a aparência dos elementos em suas páginas web de forma intuitiva e eficaz.
