Como construir uma imagem transformada na lona do javascript para html5 e css3 programação

transformações

são operações matemáticas em javascript que podem ser aplicadas a qualquer desenho ou imagem de você HTML5 e CSS3 página para alterar a aparência. Existem três grandes transformações:

• tradução: Mover uma quantidade particular de X e Y

  Video: Image Slider (1/3) HTML 5 CSS 3 and JavaScritp

• rotação: Girar em torno de um determinado ponto

• escala: Alterar o tamanho do desenho em X e Y

o elemento permite que todas estas operações em qualquer tipo de desenho. No entanto, a forma como o elemento faz isso fica um pouco mais perto de matemática do que você pode ter começado antes. Transformações no elemento de tela pode ser difícil de entender até que você entender um pouco sobre como eles realmente funcionam.

Em matemática, você realmente não transformar objetos. Em vez disso, você modificar o sistema de coordenadas, e desenhar sua imagem no sistema recém-transformada de coordenadas. É comum em um aplicativo de desenho vetorial ter vários sistemas de coordenadas escondidas de trabalho ao mesmo tempo. Isso é importante porque é a maneira transformações lona trabalhar. Essencialmente quando você quer executar transformações em um objeto, você vai fazer o seguinte:

1. Anunciar o início de um sistema de coordenadas temporária.

   Video: Array Slideshow Animation Tutorial javascript CSS3 HTML5

   A imagem principal já tem seu próprio sistema de coordenadas que não vai mudar. Antes você pode transformar qualquer coisa, você precisa para construir um novo sistema de coordenadas para realizar essas mudanças. o Salve () comando indica o início de uma nova definição do sistema de coordenadas.

2. Mova o centro com traduzir().

   
   
   
   

   A origem (0, 0) começa no canto superior esquerdo da tela por padrão. Normalmente você vai construir seus objetos transformados no (novo) origem e mover a origem para colocar o objeto. Se vocês traduzir (50, 50) e, em seguida, desenhar uma imagem em (0, 0), a imagem é tirada na origem do sistema de coordenadas temporária, que é em (50, 50) na lona principal.

3. Girar o sistema de coordenadas com rodar ().

   o rodar () comando roda o novo sistema de coordenadas em torno de sua origem. O parâmetro de rotação é formado em radianos.

4. Dimensionar o sistema de coordenadas X e Y. em

   Você também pode alterar o novo sistema de coordenadas através da aplicação de valores de escala X e Y. Isso permite que você crie imagens esticadas e comprimidas.

5. Criar elementos no novo sistema de coordenadas.

   Depois de aplicar todas as transformações que você quer, você pode usar todas as técnicas de desenho lona comuns. No entanto, estes desenhos serão sorteados no sistema “virtual” coordenar você acabou de fazer, não no principal sistema de coordenadas da tela.

6. Feche o sistema de coordenadas temporária.

   Geralmente você vai querer aplicar diferentes transformações para diferentes partes da sua tela. Quando você terminar com uma transformação especial, use o restaurar() comando para fechar o novo sistema de coordenadas. Todos os comandos de desenho posteriores usará o padrão do sistema de coordenadas objeto.