Propriedade CSS transform

A propriedade CSS transform permite reposicionar, redimensionar, girar ou distorcer visualmente um elemento sem afetar o layout ao redor. É uma das propriedades do CSS3, e aceita a palavra-chave none ou uma ou mais funções de transform — por exemplo rotate(), scale(), translate() ou skew().

Um ponto importante de entender: um transform muda como o elemento é pintado, mas o espaço que ele originalmente ocupava no fluxo do documento permanece o mesmo. Elementos vizinhos não refluem quando você transforma um elemento, e é exatamente por isso que os transforms são baratos para animar — o navegador pode delegá-los à GPU.

Esta página abrange a sintaxe, o conjunto completo de funções de transform 2D e 3D, como o ponto ao redor do qual o elemento se transforma (transform-origin) afeta o resultado e como os transforms se combinam com transitions e animations para criar movimento.

Informação

Os transforms se aplicam a elementos transformáveis — caixas block, flex, grid e inline-block, além de elementos SVG. Eles não se aplicam a elementos inline não substituídos, como um <span> simples (adicione display: inline-block primeiro).

Você pode encadear várias funções em uma única declaração. Elas são aplicadas da direita para a esquerda, portanto a função mais à direita é executada primeiro:

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Valor Inicial	none
Aplica-se a	Elementos transformáveis.
Herdado	Não.
Animável	Sim.
Versão	CSS3
Sintaxe DOM	Object.style.transform = "rotate(10deg)";

Sintaxe

Valores CSS transform

transform: none | transform-functions | initial | inherit;

Exemplo da propriedade transform:

Exemplo de código CSS transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo com várias funções de transform

Exemplo CSS transform com vários valores

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Experimente Você Mesmo »

Funções de transform

translate()

translate(tx, ty) move um elemento horizontalmente e verticalmente sem afetar outros elementos. tx é o deslocamento horizontal e ty o vertical; um valor positivo de ty move o elemento para baixo. Use translateX() ou translateY() para um único eixo. Por não disparar reflow de layout, translate() é a forma preferida de mover um elemento em animações:

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) redimensiona um elemento em relação ao seu tamanho atual. 1 mantém o tamanho inalterado, 2 dobra, 0.5 reduz pela metade e um valor negativo espelha o elemento. Passe um único argumento para escalar os dois eixos igualmente:

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) gira um elemento ao redor de sua origem. Um ângulo positivo gira no sentido horário; um ângulo negativo gira no sentido anti-horário. O ângulo é fornecido em deg, rad, grad ou turn:

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) inclina (distorce) um elemento ao longo dos eixos x e y. skewX() e skewY() inclinam ao longo de um único eixo. Um skew de 0deg deixa o eixo sem alteração:

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) combina todos os transforms 2D — scale, skew, rotate e translate — em uma única função. Raramente é escrita manualmente; os navegadores a calculam internamente, e é a forma que você vê ao ler um estilo computado.

transform-origin

Por padrão, todo transform pivota ao redor do centro do elemento. A propriedade transform-origin altera esse ponto de ancoragem, o que muda drasticamente o resultado de um rotate() ou scale(). Por exemplo, transform-origin: top left faz com que rotate(45deg) gire o elemento ao redor do seu canto superior esquerdo em vez do centro.

Transforms 2D vs 3D

As funções acima operam no plano 2D. Suas contrapartes 3D — translateZ(), rotateX(), rotateY(), rotate3d() e similares — movem e giram elementos pelo eixo z (em direção ao espectador ou afastando-se dele). Os transforms 3D só parecem tridimensionais quando uma perspective é aplicada ao elemento ou ao seu pai; sem perspectiva, um rotateY() simplesmente parece comprimir o elemento horizontalmente.

Animando transforms

A propriedade transform é animável, sendo assim o principal recurso de movimentos suaves na interface. Combine-a com uma transition para efeitos de hover, ou com uma animation e keyframes para movimentos contínuos:

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Valores

Valor	Descrição	Experimente
none	Nenhum transform é aplicado.	Experimente »
translate()	Translada o elemento por um vetor [tx, ty]. Tx é a translação ao longo do eixo x. Ty é a translação ao longo do eixo y.	Experimente »
translateX()	Translada o elemento ao longo do eixo x.	Experimente »
translateY()	Translada o elemento ao longo do eixo y.	Experimente »
scale(x, y)	Aumenta ou diminui um elemento.	Experimente »
scaleX()	Escala um elemento ao longo do eixo x.	Experimente »
scaleY()	Escala um elemento ao longo do eixo y.	Experimente »
rotate(angle)	Gira um elemento no espaço bidimensional. O ângulo é especificado no parâmetro.	Experimente »
skew()	Define uma transformação de skew 2D ao longo do eixo x e do eixo y.	Experimente »
skewX()	Define uma transformação de skew 2D ao longo do eixo x.	Experimente »
skewY()	Define uma transformação de skew 2D ao longo do eixo y.	Experimente »
matrix()	Define uma transformação 2D usando uma matriz de seis valores.	Experimente »
translateZ()	Translada um elemento pela quantidade especificada ao longo do eixo z.
translate3d()	Define uma translação tridimensional.
scaleZ()	Escala um elemento na terceira dimensão, ao longo do eixo z.
scale3d()	Define uma transformação de escala tridimensional.
rotateX()	Gira um elemento ao redor do eixo x no espaço tridimensional.	Experimente »
rotateY()	Gira um elemento ao redor do eixo y no espaço tridimensional.	Experimente »
rotateZ()	Gira um elemento ao redor do eixo z no espaço tridimensional.	Experimente »
rotate3d()	Define uma transformação de rotação tridimensional.
matrix3d()	Define uma transformação 3D usando uma matriz 4x4 de 16 valores.
perspective()	Define uma visão em perspectiva para o elemento tridimensional.
initial	Faz com que a propriedade use seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Prática

Qual afirmação está incorreta sobre a propriedade transform?

Ela pode ser aplicada a elementos transformáveis.A propriedade transform permite girar, escalar, inclinar ou transladar o elemento.Ela especifica apenas a transformação bidimensional do elemento.