transform propriedade é sua varinha mágica. Ele permite que você execute todas essas operações encantadoras e muito mais, abrindo um mundo de possibilidades para animar e transformar seus elementos da web de maneiras emocionantes!
Sintaxe
O transform o valor padrão da propriedade é none, o que significa que nenhuma transformação é aplicada. Sua sintaxe é bastante direta e aqui está como você pode invocar a magia com um simples feitiço:
1 |
selector { |
2 |
transform: transform-function(transform-value); |
3 |
}
|
No trecho acima, substitua transform-function com o tipo de transformação que você deseja. Você pode até encadear múltiplas transformações para criar uma sequência de efeitos mágicos!
O
transform A propriedade pode ser aplicada a todos os elementos, exceto caixas embutidas não substituídas, caixas de colunas de tabela e caixas de grupo de colunas de tabela.
Fragmento de código:
Este exemplo aplica duas funções a um elemento.
1 |
div { |
2 |
transform: rotate(30deg) scale(1.2); |
3 |
}
|
Transformar funções e valores
Há uma paleta vibrante de funções que você pode usar com CSS transform propriedade para dar vida às suas visões criativas:
Funções de transformação 2D
-
translate(): Move um elemento de sua posição atual em um espaço 2D. -
translateX(): Move um elemento ao longo do eixo x. -
translateY(): Move um elemento ao longo do eixo y. -
rotate(): gira um elemento a partir de um determinado ponto, com base em um ângulo específico. -
scale(): altera o tamanho de um elemento. -
scaleX(): dimensiona um elemento ao longo do eixo x. -
scaleY(): dimensiona um elemento ao longo do eixo y. -
skew(): inclina um elemento ao longo dos eixos x e y. -
skewX(): inclina um elemento ao longo do eixo x. -
skewY(): inclina um elemento ao longo do eixo y. -
matrix(): Aplica uma matriz de transformação 2D a um elemento, definido por seis valores.
Funções de transformação 3D
-
translate3d(): Move um elemento em um espaço 3D. -
translateZ(): Move um elemento ao longo do eixo z. -
rotate3d(): gira um elemento no espaço 3D usando quatro valores. -
rotateX(): gira um elemento em torno do eixo x em um espaço 3D. -
rotateY(): gira um elemento em torno do eixo y em um espaço 3D. -
rotateZ(): gira um elemento em torno do eixo z em um espaço 3D. -
scale3d(): dimensiona um elemento em um espaço 3D. -
scaleZ(): dimensiona um elemento ao longo do eixo z em um espaço 3D. -
matrix3d(): Aplica uma matriz de transformação 3D a um elemento, definido por 16 valores. -
perspective(): aplica uma vista em perspectiva a um elemento.
Se estiver usando
perspective() como um dos vários valores de função, deve ser o primeiro listado.
Funções de transformação adicionais
-
none: redefine a propriedade transform, representando nenhuma transformação.
Exemplo de uso
1 |
/* Using 2D functions */
|
2 |
.element { |
3 |
transform: rotate(30deg) translateX(50px) scaleY(1.2); |
4 |
}
|
5 |
|
6 |
/* Playing with 3D transformations */
|
7 |
.element3d { |
8 |
transform: rotate3d(1, 0, 0, 45deg) translateZ(100px) scale3d(1.0, 1.2, 1.5); |
9 |
}
|
Estas funções podem ser misturadas e combinadas, e até mesmo encadeadas para criar transformações complexas e efeitos encantadores. Experimente as demonstrações abaixo para ver como algumas das funções de tradução afetam um div quadrado:
traduzirX()
traduzirY()
inclinaçãoY()
Origem da transformação
Você sabia? O transform propriedade pode trabalhar de mãos dadas com o transform-origin propriedade, permitindo alterar o ponto em torno do qual a transformação ocorre. É como escolher o palco onde o seu elemento executa a sua dança fascinante, acrescentando uma nova perspectiva às transformações!
Recursos adicionais
Para aqueles que desejam se aprofundar nos mistérios e maravilhas do transform propriedade, aqui estão alguns recursos valiosos:
