Resumo das propriedades de transformação CSS
- #CSS
As transformações permitem que os elementos sejam movidos, girados, dimensionados e inclinados ao passar o mouse por cima, por exemplo.
Resumo das propriedades de transformação
- transform - Aplica uma transformação 2D ou 3D a um elemento.
- transform-origin - Permite alterar a posição em elementos transformados.
- transform-style - Especifica como os elementos aninhados são renderizados no espaço 3D.
- perspective - Específica a perspectiva de como os elementos 3D são visualizados.
- perspective-origin - Especifica a posição inferior dos elementos 3D.
- backface-visibility - Define se um elemento deve ou não estar visível quando não está voltado para a tela.
Resumo das funções associadas às transformações 2D
- matrix(n,n,n,n,n,n) - Define uma transformação 2D, usando uma matriz de seis valores.
- translate(x,y) - Define uma translação 2D, movendo o elemento ao longo dos eixos X e Y.
- translateX(n) - Define uma translação 2D, movendo o elemento ao longo do eixo X.
- translateY(n) - Define uma translação 2D, movendo o elemento ao longo do eixo Y.
- scale(x,y) - Define uma transformação de escala 2D, alterando a largura e a altura dos elementos.
- scaleX(n) - Define uma transformação de escala 2D, alterando a largura do elemento.
- scaleY(n) - Define uma transformação de escala 2D, alterando a altura do elemento.
- rotate(angle) - Define uma rotação 2D, o ângulo é especificado no parâmetro.
- skew(x-angle,y-angle) - Define uma transformação de inclinação 2D ao longo dos eixos X e Y.
- skewX(angle) - Define uma transformação de inclinação 2D ao longo do eixo X.
- skewY(angle) - Define uma transformação de inclinação 2D ao longo do eixo Y.
Resumo das funções associadas às transformações 3D
- matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - Define uma transformação 3D, usando uma matriz 4x4 de 16 valores.
- translate3d(x,y,z) - Define uma tradução 3D.
- translateX(x) - Define uma tradução 3D, usando apenas o valor para o eixo X.
- translateY(y) - Define uma tradução 3D, usando apenas o valor do eixo Y.
- translateZ(z) - Define uma tradução 3D, usando apenas o valor para o eixo Z.
- scale3d(x,y,z) - Define uma transformação em escala 3D.
- scaleX(x) - Define uma transformação de escala 3D dando um valor para o eixo X.
- scaleY(y) - Define uma transformação de escala 3D dando um valor para o eixo Y.
- scaleZ(z) - Define uma transformação de escala 3D dando um valor para o eixo Z.
- rotate3d(x,y,z,angle) - Define uma rotação 3D.
- rotateX(angle) - Define uma rotação 3D ao longo do eixo X.
- rotateY(angle) - Define uma rotação 3D ao longo do eixo Y.
- rotateZ(angle) - Define uma rotação 3D ao longo do eixo Z.
- perspective(n) - Define uma vista em perspectiva para um elemento transformado em 3D.