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.