{"id":790,"date":"2024-04-28T23:28:42","date_gmt":"2024-04-29T02:28:42","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=790"},"modified":"2025-11-09T09:34:13","modified_gmt":"2025-11-09T12:34:13","slug":"transform-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/transform-no-css\/","title":{"rendered":"Transform no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 3<\/span> minutos<\/span><\/span>\n

Transform no CSS<\/strong>: A propriedade transform<\/code><\/strong> no CSS permite alterar a posi\u00e7\u00e3o, dimens\u00e3o, rota\u00e7\u00e3o ou inclina\u00e7\u00e3o de um elemento sem afetar o fluxo do documento<\/strong> (layout<\/em>).<\/p>\n\n\n\n

Esta propriedade \u00e9 fundamental para a cria\u00e7\u00e3o de anima\u00e7\u00f5es fluidas e de alto desempenho, pois as transforma\u00e7\u00f5es s\u00e3o processadas diretamente pela GPU<\/strong> (Placa Gr\u00e1fica) do dispositivo, garantindo taxas de quadros (FPS) mais altas do que alterar propriedades como width<\/code> ou margin<\/code>.<\/p>\n\n\n\n

Neste artigo, exploraremos as fun\u00e7\u00f5es 2D mais comuns e a import\u00e2ncia da otimiza\u00e7\u00e3o de desempenho.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Fun\u00e7\u00f5es de Transforma\u00e7\u00e3o 2D Essenciais<\/h2>\n\n\n\n

Todas as fun\u00e7\u00f5es s\u00e3o aplicadas em rela\u00e7\u00e3o ao centro (ou \u00e0 origem) do elemento por padr\u00e3o.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. Movimento (translate<\/code>)<\/h3>\n\n\n\n

A fun\u00e7\u00e3o translate()<\/code> move o elemento do seu estado original.<\/p>\n\n\n\n

Fun\u00e7\u00e3o<\/strong><\/td>Descri\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
translateX(X)<\/code><\/strong><\/td>Move o elemento horizontalmente (Eixo X).<\/td>transform: translateX(100px);<\/code><\/td><\/tr>
translateY(Y)<\/code><\/strong><\/td>Move o elemento verticalmente (Eixo Y).<\/td>transform: translateY(50%);<\/code><\/td><\/tr>
translate(X, Y)<\/code><\/strong><\/td>Combina\u00e7\u00e3o de X e Y.<\/td>transform: translate(10px, -5px);<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Importante:<\/strong> Usar transform: translate()<\/code> para mover um elemento \u00e9 muito mais perform\u00e1tico<\/strong> do que usar margin<\/code> ou position: relative<\/code> e top\/left<\/code>, especialmente em anima\u00e7\u00f5es.<\/p>\n<\/blockquote>\n\n\n\n

<\/div>\n\n\n\n

B. Rota\u00e7\u00e3o (rotate<\/code>)<\/h3>\n\n\n\n

A fun\u00e7\u00e3o rotate()<\/code> gira o elemento em torno do ponto de origem.<\/p>\n\n\n\n

Fun\u00e7\u00e3o<\/strong><\/td>Descri\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
rotate(angle)<\/code><\/strong><\/td>Rotaciona o elemento no plano 2D.<\/td>transform: rotate(45deg);<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

C. Escala (scale<\/code>)<\/h3>\n\n\n\n

A fun\u00e7\u00e3o scale()<\/code> redimensiona o elemento. Valores maiores que 1 aumentam o tamanho; valores menores que 1 diminuem.<\/p>\n\n\n\n

Fun\u00e7\u00e3o<\/strong><\/td>Descri\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
scaleX(X)<\/code><\/strong><\/td>Redimensiona apenas horizontalmente.<\/td>transform: scaleX(1.5);<\/code><\/td><\/tr>
scaleY(Y)<\/code><\/strong><\/td>Redimensiona apenas verticalmente.<\/td>transform: scaleY(0.5);<\/code><\/td><\/tr>
scale(X, Y)<\/code><\/strong><\/td>Redimensiona X e Y.<\/td>transform: scale(1.2);<\/code> (Uniforme)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

D. Inclina\u00e7\u00e3o (skew<\/code>)<\/h3>\n\n\n\n

A fun\u00e7\u00e3o skew()<\/code> distorce o elemento, inclinando-o em um \u00e2ngulo.<\/p>\n\n\n\n

Fun\u00e7\u00e3o<\/strong><\/td>Descri\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
skewX(angle)<\/code><\/strong><\/td>Inclina o elemento horizontalmente.<\/td>transform: skewX(10deg);<\/code><\/td><\/tr>
skewY(angle)<\/code><\/strong><\/td>Inclina o elemento verticalmente.<\/td>transform: skewY(-5deg);<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

2. Controle de Transforma\u00e7\u00e3o<\/h2>\n\n\n\n

A. Ponto de Origem (transform-origin<\/code>)<\/h3>\n\n\n\n

O ponto de origem define o centro do qual as transforma\u00e7\u00f5es (especialmente rotate<\/code> e scale<\/code>) s\u00e3o calculadas. O padr\u00e3o \u00e9 50% 50%<\/code><\/strong> (ou center center<\/code>).<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.card {\n  \/* Rotaciona em torno do canto superior esquerdo *\/\n  transform-origin: top left; \n  transform: rotate(90deg);\n}\n<\/code><\/pre>\n\n\n\n
Voc\u00ea pode usar palavras-chave (top<\/code>, bottom<\/code>, left<\/code>, right<\/code>, center<\/code>), porcentagens ou unidades de comprimento.<\/p>\n\n\n\n
<\/div>\n\n\n\n
B. Combina\u00e7\u00e3o de Fun\u00e7\u00f5es<\/h3>\n\n\n\n
Voc\u00ea pode combinar v\u00e1rias transforma\u00e7\u00f5es em uma \u00fanica declara\u00e7\u00e3o, separadas por espa\u00e7os. A ordem de aplica\u00e7\u00e3o \u00e9 importante.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
.elemento-animado {\n  \/* 1. Primeiro move (translate), depois 2. rotaciona (rotate) *\/\n  transform: translateX(20px) rotate(15deg); \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Transforma\u00e7\u00f5es 3D e Performance<\/h2>\n\n\n\n
A. Efeitos 3D<\/h3>\n\n\n\n
Para criar efeitos 3D, voc\u00ea precisa primeiro definir um contexto de perspectiva (geralmente no elemento pai) e depois usar as fun\u00e7\u00f5es 3D no elemento filho:<\/p>\n\n\n\n