CSS3 2D Transformação

CSS3 2A função D de transformação permite que2Transformar elementos no espaço D.

do elemento2D conversão

Uso de CSS3 2Função D de transformação, você pode executar operações básicas de transformação em elementos do espaço bidimensional, como mover, girar, escalar e inclinar.

Os elementos transformados não afetam os elementos ao redor, mas podem ser sobrepostos como elementos com alinhamento absoluto. No entanto, os elementos transformados continuam a ocupar espaço na layout em sua posição padrão (não transformados).

Uso de transformações CSS e funções

CSS3 O atributo transform usa funções de transformação para manipular o sistema de coordenadas usado pelo elemento, para aplicar efeitos de transformação.

A seguir, descrevemos essas funções de conversão:

função translate()

Movendo o elemento de sua posição atual para uma nova posição nas eixos X e Y. Pode ser escrito como translate(tx, ty). Se ty não for especificado, assume-se que seu valor é zero.

img {
　　　　-webkit-transform: translate(200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px);　　　　　　
}

translate(200px, 50px) esta função move a imagem horizontalmente no sentido positivo do eixo x20 pixels, e move em direção verticalmente ao longo do eixo y50 pixels.}

função rotate()

função rotate() roda o elemento ao redor de seu ponto de origem (especificado pelo transform-origem especificada) roda o elemento por um ângulo especificado. Pode ser escrita como rotate(a).

img {
　　　　-webkit-transform: rotate(30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: rotate(30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: rotate(30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: rotate(30deg);　　　　　　
}

rotate(30deg) Esta função roda a imagem em sentido horário em torno do seu ponto de origem30 graus. Você também pode usar valores negativos para girar o elemento no sentido anti-horário.

função scale()

A função scale() aumenta ou diminui o tamanho do elemento. Pode ser escrita como scale(sx, sy). Se sy não for especificado, assume-se que é igual a sx.

img {
　　　　-webkit-transform: scale(1.5);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: scale(1.5);　　/*　Firefox　*/
　　　　　　　　-ms-transform: scale(1.5);　　/*　IE　9　*/
　　　　　　　　　　　　transform: scale(1.5);　　/*　Navegadores Modernos　*/　　　　
}

scale(1.5) escala a largura e a altura da imagem para a metade do seu tamanho original.1.5vezes. A função scale(1) ou scale(1,1) não tem efeito no elemento.

função skew()

A função skew() inclina o elemento ao longo dos eixos X e Y por um ângulo especificado. Pode ser escrita como skew(ax, ay). Se ay não for especificado, assume-se que seu valor é zero.

img {
　　　　-webkit-transform: skew(-40deg,　15deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: skew(-40deg,　15deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: skew(-40deg,　15deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: skew(-40deg,　15deg);　　/*　Navegadores Modernos　*/　　　　
}

A função skew(-40deg, 15deg) inclina o elemento horizontalmente ao longo do eixo x-40 graus, e inclina o eixo y verticalmente15graus.

função matrix()

função matrix() para executar todas2transição D, por exemplo, translação, rotação, escala e inclinação. Ele adotamatrizcom seis parâmetros, pode ser escrita como matrix(a, b, c, d, e, f). No próximo capítulo, mostraremos como usá-la para representar cada2função de transição D matrix().

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—onde tx e ty são os valores de translação horizontal e vertical.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—onde, a é o ângulo em graus. Você pode trocar sin(a) e-O valor de sin(a) inverte a rotação. A maior rotação que você pode executar é360 graus.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0);—onde sx e sy são os valores de的比例ação horizontal e vertical.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0);—onde ax e ay são os valores horizontais e verticais em graus.

Esta é a execução da função matrix().2Exemplo de D transição.

img {
　　　　-webkit-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: matrix(0,　-1,　1, 0,　200px,　50px);　　
}

No entanto, ao executar várias transformações ao mesmo tempo, é mais conveniente usar uma função de transformação única e listá-las em ordem, conforme mostrado a seguir:

img {
　　　　-webkit-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　　　　　
}

2Funcionalidades de Transformação D

A tabela a seguir resume brevemente todos2Funcionalidade de Transformação D