Vídeo: Gallery CSS - Crie um Slider apenas com HTML e CSS puro! 2024
CSS 3 permite que você crie muitos efeitos legais em seu site para exibir no iPhone e no iPad. As propriedades de transformação CSS 3 permitem que transforme um elemento para criar efeitos em 2D e 3D. Você pode especificar uma lista de transformações para alterar vários aspectos de um elemento. Se várias opções forem especificadas, cada uma delas será aplicada na ordem indicada.
As opções de transformação incluem as descritas nesta lista:
-
escala - Altera a altura e a largura de um elemento. Você pode especificar dois números para definir uma escala diferente para largura e altura. No entanto, esse elemento geralmente é usado com apenas um número para dimensionar um elemento proporcionalmente. O primeiro dos seguintes exemplos transforma o elemento em escala para a metade do seu tamanho e o segundo transforma o elemento em metade da largura e duas vezes mais alta:
-webkit-transform: scale (0.5); -webkit-transform: escala (2, 0. 5);
-
traduzir - Use esta propriedade para traduzir , ou mover, um elemento 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 apenas um eixo por vez. Por exemplo, esse código faz com que um elemento mova 150 pixels da esquerda e 150 da parte superior:
-webkit-transform: translate (150px, -150px);
-
skew - Use esta propriedade para skew , ou altere a posição de um elemento com base em um valor especificado que desvira um elemento nos eixos x e y. Por exemplo, isso pode distorcer um elemento de 20 graus no eixo x:
-webkit-transform: skew (15deg, 4deg);
-
rote - Use esta propriedade para rotear , ou altere a posição de um elemento com base em um valor especificado que controle o ângulo de rotação. Por exemplo, o primeiro exemplo neste código gira um elemento de 5 graus para a direita, o segundo gira o elemento -5 (negativo 5) graus.
Como você pode ver na figura, ele faz com que as fotos à direita e a esquerda neste design se afastem da imagem central:
-webkit-transform: rotate (5deg); -webkit-transform: rotate (-5deg);
No exemplo do site SCUBA mostrado nesta figura, observe que as duas imagens externas rodam para a esquerda e para a direita, respectivamente, usando o recurso Rotação CSS - mas apenas em Safari, Firefox e Chrome. Visite esta página com o IE e as caixas estão todas em linha reta, mas elas não parecem ruins assim, então não há nenhum mal.
Observe também que há uma imagem inserida na parte inferior do projeto para que, quando você gira o iPad / iPhone da paisagem para a visualização vertical, o conteúdo enche toda a tela.
