Tecnologia de animação CSS3 que você precisa conhecer (2)

traduzir

O nome "traduzir" é um pouco enganador. Na verdade, é um método de posicionamento de elementos usando valores de coordenadas X e Y.

A seguir está o conteúdo citado: #nav{ /* Isso moverá o elemento de navegação 10 pixels para a esquerda e 20 pixels para baixo */ -moz-transform: traduzir(10px, 20px); -webkit-transform: traduzir(10px, 20px); }

Suporte ao navegador

O atributo translate atualmente é suportado apenas pelo Firefox, Safari e Chrome, e deve usar os prefixos privados do navegador -moz- e -webkit-.

Inclinar

Skew também é uma função de transformação útil, que pode inclinar um objeto em um determinado ângulo em torno dos eixos xey. Isso é diferente da rotação de rotação, que apenas gira sem alterar a forma do elemento. Inclinação altera a forma de um elemento. Skew tem dois parâmetros, representando a inclinação dos eixos x e y, respectivamente.

A seguir está o conteúdo citado: #nav{ /* Isso moverá o elemento de navegação 10 pixels para a esquerda e 20 pixels para baixo */ -moz-transform: inclinação (30 graus, -10 graus); -webkit-transform: inclinação (30 graus, -10 graus); }

Suporte ao navegador

O atributo Skew é atualmente suportado apenas pelo Firefox, Safari e Chrome, e também usa os prefixos privados do navegador -moz- e -webkit-.

Matriz

Sim, Matrix é uma matriz. Matrix é uma coisa muito básica em matemática avançada e é de fato uma função muito avançada em CSS 3. CSS 3 introduz a função de matriz, que pode realizar os vários efeitos acima com muita flexibilidade. Possui 6 parâmetros (a, b, c, d, e, f), que na verdade é uma matriz 3*3 através da qual os parâmetros antigos são convertidos em novos valores:

|

|

|

Se você estiver interessado em estudar a fundo, pode dar uma olhada aqui http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined Este é um documento para SVG, mas o princípio da transformação de matrizes é universal. .

Vejamos um exemplo:

A seguir está o conteúdo citado: #nav{ /* O elemento de navegação será inclinado como o canto superior direito*/ -moz-transform: matriz (1, -0,2, 0, 1, 0, 0); -webkit-transform: matriz (1, -0,2, 0, 1, 0, 0); }

Suporte ao navegador

A boa notícia é que o IE suporta filtros de matriz, embora não suporte a maioria das funções de transformação CSS3, mas você pode basicamente obter o mesmo efeito usando este filtro. Tanto o webkit quanto o Firefox (3.5+) suportam esse recurso.

deformação da corrente

As transformações geralmente são independentes, mas se você quiser usar várias transformações ao mesmo tempo, o código pode ser integrado rapidamente, especialmente usando extensões privadas. Felizmente, temos algumas abreviações integradas:

A seguir está o conteúdo citado: #nav{ -moz-transform: traduzir(10, 25); -webkit-transform: traduzir(10, 25); -moz-transform: girar (90 graus); -webkit-transform: girar (90 graus); -moz-transformada: escala(2, 1); -webkit-transform: escala(2, 1); }

Essas transformações podem ser encadeadas para tornar seu código mais eficiente:

A seguir está o conteúdo citado: navegação{ -moz-transform: traduzir (10, 25) girar (90 graus) escala (2, 1); -webkit-transform: traduzir(10, 25) girar(90deg) escala(2, 1); }

O verdadeiro poder dessas propriedades é combinado. Você pode mover, girar, dimensionar e controlar qualquer elemento embutido e em nível de bloco sem usar JavaScript. Quando o suporte para essas propriedades se tornar mais difundido, poderemos criar interfaces e aplicativos mais ricos e leves.

origem da transformação

transform-origin não é uma subfunção de transform, mas está intimamente relacionada a transform. Ele pode ser usado para especificar o ponto inicial da transformação. Por exemplo, o ponto inicial padrão da transformação de rotação é o meio. Você pode definir o ponto inicial no canto superior esquerdo ou no canto inferior esquerdo, para que os resultados de. a transformação de rotação pode ser muito diferente.

transform-origin aceita dois parâmetros, que podem ser valores específicos, como porcentagem, em, px, etc., ou parâmetros descritivos, como esquerda, centro, direita ou superior, médio, inferior, etc. Alguns exemplos:

A seguir está o conteúdo citado: .class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; ...} .class3{-moz-transform-origin:canto superior esquerdo; -webkit-transform-origin:canto superior esquerdo; ...}

Compatibilidade do navegador

Atualmente, esse atributo é compatível apenas com webkit e firefox e requer a adição de seu próprio prefixo privado.