Transformar - CSS-Tricks

A transformpropriedade permite que você manipule visualmente um elemento inclinando, girando, transladando ou dimensionando:

.element ( width: 20px; height: 20px; transform: scale(20); )

Mesmo com uma altura e largura declaradas, este elemento agora será dimensionado para vinte vezes seu tamanho original:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Dar a esta função dois valores irá esticá-la horizontalmente pelo primeiro e verticalmente pelo segundo. No exemplo abaixo, o elemento agora terá o dobro da largura, mas metade da altura do elemento original:

.element ( transform: scale(2, .5); )

Ou você pode ser mais específico sem usar a função abreviada:

transform: scaleX(2); transform: scaleY(.5);

Mas scale()é apenas uma das muitas funções de transformação disponíveis:

Valores

• scale(): Afeta o tamanho do elemento. Isto também se aplica ao font-size, padding, height, e widthde um elemento, também. Também é uma função abreviada para as funções scaleXe scaleY.
• skewX()e skewY(): Inclina um elemento para a esquerda ou direita, como transformar um retângulo em um paralelogramo. skew()é uma abreviatura que combina skewX()e skewYaceita ambos os valores.
• translate(): Move um elemento para os lados ou para cima e para baixo.
• rotate(): Gira o elemento no sentido horário a partir de sua posição atual.
• matrix(): Uma função que provavelmente não se destina a ser escrita à mão, mas combina todas as transformações em uma.
• perspective(): Não afeta o elemento em si, mas afeta as transformações 3D dos elementos descendentes, permitindo que todos tenham uma perspectiva de profundidade consistente.

Enviesamento

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

As funções de transformação skewXe skewYinclinam um elemento de uma forma ou de outra. Lembre-se: não há propriedade abreviada para distorcer um elemento, então você precisará usar ambas as funções. No exemplo abaixo, podemos inclinar um quadrado de 100 px x 100 px para a esquerda e para a direita com skewX:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Enquanto neste exemplo podemos inclinar um elemento verticalmente com skewY:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Agora vamos usar skew()para combinar os dois:

Veja a
propriedade abreviada Pen skew () por CSS-Tricks (@ css-tricks)
em CodePen.

Girar

.element ( transform: rotate(25deg); )

Isso gira um elemento no sentido horário de sua posição original, enquanto um valor negativo o faria girar na direção oposta. Aqui está um exemplo animado simples em que um quadrado continua girando 360 graus a cada três segundos:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Podemos também usar as rotateX, rotateYe rotateZfunções, assim:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Traduzir

.element ( transform: translate(20px, 10px); )

Essa função de transformação move um elemento para os lados ou para cima e para baixo. Por que não usar apenas superior / esquerda / inferior / direita? Bem, às vezes é um pouco confuso. Eu pensaria nisso como layout / posicionamento (eles têm melhor suporte ao navegador de qualquer maneira) e isso como uma maneira de mover essas coisas como parte de uma transição ou animação.

Esses valores seriam qualquer valor de comprimento, como 10px ou 2,4em. Um valor moverá o elemento para a direita (valores negativos para a esquerda). Se um segundo valor for fornecido, esse segundo valor o moverá para baixo (valores negativos para cima). Ou você pode ser específico:

transform: translateX(value); transform: translateY(value);

É importante observar que um elemento usando transformnão fará com que outros elementos fluam em torno dele. Usando a translatefunção abaixo e empurrando o quadrado verde para fora de sua posição original, notaremos como o texto ao redor permanecerá fixo no lugar, como se o quadrado fosse um elemento de bloco:

Veja a explicação da transformação da caneta por CSS-Tricks (@ css-tricks) no CodePen.

Também é importante notar que translateserá acelerado por hardware se você quiser animar essa propriedade, ao contrário position: absolute.

Valores múltiplos

Com uma lista separada por espaços, você pode adicionar vários valores à transformpropriedade:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

É importante notar que existe uma ordem em que essas transformações serão realizadas, no exemplo acima o `skew` será executado primeiro e depois o elemento será escalado.

Matriz

A matrixfunção de transformação pode ser usada para combinar todas as transformações em uma. É um pouco como uma abreviação de transformação, só que não acredito que seja realmente feito para ser escrito à mão. Existem ferramentas como The Matrix Resolutions, que podem converter um grupo de transformações em uma única declaração de matriz. Talvez em algumas situações isso possa reduzir o tamanho do arquivo, embora micro otimizações hostis ao autor como essa provavelmente não valham seu tempo.

Para os curiosos, este:

rotate(45deg) translate(24px, 25px)

também pode ser representado como:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Transformações 3D

A maioria das propriedades acima tem versões 3D deles.

translate3d(x, y, z) translateZ(z)

O terceiro valor em translate3dou o valor em translateZmove o elemento em direção ao visualizador, afastando os valores negativos.

scale3d(sx, sy, sz) scaleZ(sz)

O terceiro valor em scale3dou o valor em scaleZafeta a escala ao longo do eixo z (por exemplo, a linha imaginária que sai diretamente da tela).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXe rotateYirá girar um elemento no espaço 3D em torno desses eixos. rotate3dpermite que você especifique um ponto no espaço 3D no qual girar o elemento.

matrix3d(… )

Uma maneira de descrever programaticamente uma transformação 3D em uma grade 4 × 4. Ninguém jamais escreverá uma dessas à mão.

perspective(value)

Este valor não afeta o elemento em si, mas afeta as transformações 3D dos elementos descendentes, permitindo que todos tenham uma perspectiva de profundidade consistente.

Mais Informações

• Documentos MDN sobre transformação e uso.
• Documentação de David DeSandro sobre transformações 3D
• Surfin 'Safari: transformações 3D
• Especificação W3C em transformações CSS3
• Introdução às transformações CSS 3D

Suporte para navegador

Transformações 2D

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
Nenhum	3.1+	3,5+	10,5+	9+	4.1+	Pelo menos 4

Transformações 3D

cromada	Safári	Raposa de fogo	Ópera	IE	Android	iOS
10+	4+	12+	Nenhum	10+	4.1+	5+

Prefixos de fornecedores

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )