Uma olhada nas transformações 2D CSS3
o Módulo de transformação é uma tremenda adição ao CSS3, leva a maneira como manipulamos elementos em um site para o próximo nível.
Existem algumas experiências que realmente me surpreendem, exemplos como este. No entanto, não vamos construir algo como um ícone somente CSS que pode de alguma forma se transformar em um Autobot, pois pode ser esmagador e pouco utilizável na vida real também.
Em vez disso, desta vez, estaremos recuando e revisando os fundamentos das Transformações 2D CSS3 para ver como ele funciona em um nível fundamental.
A sintaxe
O módulo Transformações CSS3 basicamente nos permite transformar um elemento até certo ponto, como traduzir, dimensionar, girar e inclinar.
A sintaxe oficial é transform: método (valor). No entanto, como qualquer outra grande adição do CSS3 que ainda está nos estágios iniciais, os navegadores atuais ainda precisam da versão da sintaxe para executar as transformações. Então, a sintaxe completa seria assim:
transform: método (valor); / * W3C Sintaxe Oficial * / -o-transform: método (valor); / * Opera 10.5+ * / -ms-transform: método (valor); / * Internet Explorer 9.0+ * / -moz-transform: método (valor); / * Firefox 3.6+ * / -webkit-transform: método (valor); / * Chrome / Safari 3.2+ * /
Além disso, o método a que estamos nos referindo acima é o funções de transformação, que pode ser substituído por um dos seguintes: traduzir(), escala(), girar () ou inclinação ().
O valor que
A maior parte do valor do método corresponderá ao Eixo X e Eixo Y. Se você se lembra do sistema de coordenadas cartesianas da sua classe de matemática no ensino médio, o princípio básico é bastante semelhante, o eixo X representa o horizontal linha e o eixo Y representa o vertical linha.
Exceto por rotações. o rotação usará o coordenadas polares que é expresso em graus que variam de 0 a 360.
Os valores para todos os métodos podem ser negativos ou positivos. Basta tomar uma nota, porém, como a página web é lida sequencialmente de cima para baixo, o que faz com que o eixo Y na web trabalhe o oposto do princípio original das coordenadas cartesianas. Isso significa que quando você adiciona um valor negativo Eixo Y, vai passar para o topo.
Usando as transformações
Agora, vamos ver a seguinte demonstração básica para ver Transformação em ação.
Eu traduzo
Não fique embaçado com o termo traduzir, não traduzirá língua estrangeira. o traduzir aqui é realmente um método para mover elementos em alguma direção.
O método contém dois valores; X e Y. a Valor X como apontamos acima, tomaremos o elemento horizontalmente; para a esquerda ou para a direita, enquanto o Y valor vai leva verticalmente para a parte inferior ou para o topo.
Agora, vamos ver algumas demonstrações simples abaixo:
div largura: 100px; altura: 100 px; transformar: translate (100px, 250px);
O snippet acima moverá o elemento por 100px para a direita e 250px para a parte inferior.
div largura: 100px; altura: 100 px; transformar: translate (100px, 0);
O trecho acima irá mover o elemento para a direita por 100px, porque estamos zerando o eixo Y. Então, se quisermos mover o elemento para a esquerda, precisamos apenas definir o eixo X em negativo, da seguinte maneira:
div largura: 100px; altura: 100 px; transformar: translate (-100px, 0);
- Demo "Translate"
Alternativamente, somos capazes de mover o elemento em uma única direção com esses métodos individuais; translateX () e translateY (), a diferença é que cada um desses métodos aceita apenas um valor.
Então, praticamente falando, o transformar: translate (-100px, 0) também é igual a transformar: translateX (-100px).
II - Escala
o escala método nos permite ampliar ou reduzir os elementos do seu tamanho real. O valor da escala é o mesmo que o traduzir método acima, ele também contém X e Y. A única diferença é que não especificamos a unidade. Aqui está um exemplo:
div largura: 100px; altura: 100 px; transformar: escala (1,5);
O exemplo acima irá ampliar o div 1,5 ou 150% do seu tamanho real, e já que a dimensionamos igualmente para as direções X e Y, precisamos apenas declará-la em um valor. Você também pode declará-lo desta maneira transformar: escala (1,5,1,5); se você quiser dar mais detalhes, ele fará o mesmo.
Além disso, se quisermos reduzir o elemento, usaríamos especificamente um valor de 0,999 a 0 absoluto, como no exemplo abaixo, que reduzirá o tamanho do div para 50% ou metade:
div largura: 100px; altura: 100 px; transformar: escala (0,5);
Mas, seja cauteloso, se você definir o valor como absoluto “0” a div só vai desaparecer, a menos que você tenha uma razão válida para fazer isso, eu não recomendaria fazê-lo.
- Demo "Scale"
III - Rodar
Como mencionamos anteriormente neste post, o rodar método usa coordenadas polares, então o valor é indicado em graus. Aqui estão dois exemplos
O trecho abaixo girará o div 30 graus no sentido horário.
div largura: 100px; altura: 100 px; transformar: girar (30deg);
Um valor negativo, conforme ilustrado no exemplo abaixo, irá girar div na direção oposta (no sentido anti-horário) no mesmo grau.
div largura: 100px; altura: 100 px; transformar: girar (-30deg);
- Demonstração "girar"
IV - Skew
o inclinar método nos permite criar uma espécie de paralelogramo. Também contém dois valores do eixo X e Y. No entanto, o valor em si é indicado em graus, em vez de medidas lineares como as que usamos para o escala ou o traduzir método. Aqui está um exemplo:
div largura: 200px; altura: 100 px; transformar: inclinação (30deg, 10deg);
- Demo "Skew"
V - Múltiplos métodos
o transformar propriedade não se limita a lidar com apenas um método, na verdade, podemos incluir vários métodos em declarações únicas, como este:
div largura: 100px; altura: 100 px; transformar: translateX (100px) girar (45deg);
O snippet acima irá mover o elemento 100px para a direita e ao mesmo tempo também gira 45 graus.
Demonstração "Multiple Method".
Transformar Origem
o transfrom-origin - como o próprio nome indica - é usado para controlar o ponto de partida da transformação. Se não declararmos explicitamente essa propriedade com a seguinte sintaxe Transformar-origem: X Y;, então o navegador terá o valor padrão que é 50% para o X e 50% para o Y.
Agora, se especificarmos o transformar-origem para 0 (X) 0 (Y) a transformação começará no canto superior esquerdo.
Novamente, todos os navegadores ainda precisam da versão do prefixo para chamar essa propriedade. Então, aqui está a versão completa para garantir que funcione na maioria dos navegadores atuais:
-webkit-transform-origin: X Y; -moz-transform-origin: X Y; -o-transformar-origem: X Y; -ms-transform-origin: X Y; Transformar-origem: X Y;
- Demo "Transform-origin"
Conclusão
Nós passamos por todos os quatro métodos essenciais de transformação; traduzir, dimensionar, girar e inclinar
No entanto, como mencionado, este módulo ainda está no estágio inicial, portanto, se você aplicar esses métodos em seu próximo site, certifique-se de que ele degrada normalmente para navegadores incompatíveis (não estou me referindo ao IE6 aqui).
Por fim, você pode ver toda a demonstração ou baixar a fonte nos links a seguir.
- Demonstração
- Fonte de download
