Como criar transformações com CSS 3

CSS 3 permite criar muitos efeitos interessantes em seu site para a exibição no iPhone e iPad. As CSS 3 transformam propriedades permitem que você transformar um elemento para criar efeitos em 2D e 3D. Você pode especificar uma lista de transformações para alterar múltiplos aspectos de um elemento. Se várias opções são especificados, cada um é aplicada na ordem listada.

opções de transformação incluem as descritas nesta lista:

• escala - Altera a altura e largura de um elemento. Você pode especificar dois números para definir uma escala diferente para a largura e altura. No entanto, este elemento é geralmente usado com um único número de dimensionar um elemento proporcionalmente. O primeiro dos exemplos a seguir transforma o elemento para se adaptar a metade do seu tamanho, e o segundo elemento para transforma a metade da largura e duas vezes mais alto:

  -webkit-transform: escala (0,5) - webkit-transform: Escala (2, 0.5) -

• traduzir - Use essa propriedade para traduzir, ou movimento, um elemento a partir da posição A para a posição B igualmente ao longo dos eixos x e y. Você também pode usar translateX e translateY para mover elementos ao longo de um eixo de cada vez. Por exemplo, este código faz com que um elemento de se mover 150 pixels a partir da esquerda e 150 a partir do topo:

  -webkit-transform: translate (150px, -150px) -

• enviesado - Use essa propriedade para enviesado, ou alterar a posição de um elemento com base em um valor especificado que distorce um elemento na eixos x e y. Por exemplo, esta poderia inclinar um elemento de 20 graus sobre o eixo X:

  -webkit-transform: inclinação (15deg, 4deg) -

• rodar - Use essa propriedade para rodar, ou alterar a posição de um elemento com base em um valor especificado que controla o ângulo de rotação. Por exemplo, o primeiro exemplo deste código gira um elemento 5 graus para a direita, o segundo elemento de uma roda a -5 (5) graus negativos.

  Como você pode ver na figura, faz com que as fotos à direita e à esquerda em este projeto para o ângulo longe da imagem center:

  -webkit-transform: rotate (5deg) - webkit-transform: rotate (-5deg) -

No exemplo site de mergulho mostrado nesta figura, notar que as duas imagens fora girar para a esquerda e direita, respectivamente, utilizando o recurso de CSS Rodar - mas apenas no Safari, Firefox e Chrome. Visite esta página com IE e as caixas estão todos em uma linha reta, mas não ficar mal dessa forma, então não há nenhum dano feito.

Note também que há uma imagem enfiado na parte inferior do projeto de modo que quando você ligar o iPad / iPhone a partir de paisagem para retrato, conteúdo preenche a tela inteira.