Olá a todos.
Hoje vamos falar brevemente sobre transformações.
Transformações são muito semelhantes às transições, na medida em que fornecem outra
opção para alterar a aparência dos elementos que estão em nossa página.
Assim, podemos mudar as coisas tanto da maneira bidimensional quanto de
uma maneira tridimensional como as pessoas estão olhando para o seu site.
Então vamos olhar para algumas das opções de transformação bidimensional.
Vamos falar sobre traduzir, girar, escalar,
inclinação e matriz, e como cada um deles pode funcionar dentro do seu CSS3.
A primeira opção que vou mostrar é traduzir.
O que traduzir vai fazer é que você pode dar-lhe dois valores, eu chamei-os x e
y e dependendo desses valores,
você pode mover o elemento para a esquerda e direita ou para cima e para baixo.
Se x for positivo,
você se move para a direita, se for negativo, você se move para a esquerda.
Com y, se for positivo, você se move para baixo e se for negativo, você vai para cima.
Então vamos olhar para um exemplo real para torná-lo um pouco mais claro.
Aqui, eu tenho este belo elemento azul.
E o que estou prestes a dizer é que quero traduzi-lo, 100 e 75.
Então você vai esperar vê-lo mover-se para a direita e para baixo um pouco.
Então você pode ver, novamente, é difícil dizer quando as coisas vão para cima e para baixo.
Mas se você olhar para as margens, nós quase efetivamente aumentamos as margens.
A próxima opção é girar.
Quando você gira algo, você está girando, ou
eu meio que gosto de pensar nisso como girar o elemento, um certo número de graus.
Você não vê o giro.
Você só vê o resultado ou como seria no final.
Então aqui eu tenho outro elemento e eu vou dizer-lhe para girar em 30 graus.
Então daqui, até aqui.
Agora é realmente importante que lembre-se de colocar o deg.
Se você acabou de colocar 30, muitos dos navegadores não vão ter esse trabalho.
Na verdade, a maioria não vai.
Então certifique-se de dar os graus que você quer que ele gire, algum tipo de número, 30,
90, 80, e então use o grau.
Em seguida, vamos falar sobre escala.
E a escala é apenas uma maneira chique de dizer, vamos torná-la mais larga ou mais alta.
Então, novamente, você dá dois números, e
isso é o quanto você quer mudar a largura e a altura de um elemento.
Então aqui eu tenho um bloco menor, e
eu decidi que eu gostaria de fazê-lo duas vezes mais largo e três vezes mais alto.
Aqui está um novo elemento após a escala de transformação.
Skew é muito difícil para mim explicar o que ele faz, e é ainda mais difícil
fazê-lo porque eu sempre esqueço minha esquerda e direitos quando estou olhando para a câmera.
Então, novamente, você vai querer jogar com este e
olhar para alguns dos exemplos.
O que você está fazendo é que você está girando o elemento um certo número de graus em torno
do ângulo x e um certo número de graus em torno do ângulo y.
Então aqui eu vou mostrar a vocês uma inclinação, 30 graus por 15 graus.
Você começa aqui e acaba meio que virado em um ângulo muito estranho.
E novamente é muito difícil mostrar isso quando eu estou olhando para a tela, então
eu estou esperando que você digite isso e tipo de brincar com ele um pouco.
A próxima e última opção é a matriz.
E quando você usa a matriz,
você pode combinar todos os métodos de transformação 2D em um comando de uma só vez.
Eu nunca uso isso, porque eu acho muito confuso lembrar
qual é a escala, qual deles é girar, qual deles é inclinado.
Então, a menos que você se sinta realmente confiante com seu CSS3, eu evitaria usar matriz e
ir em frente e usar cada um dos outros transformadores individuais um de cada vez.
Então as outras que acabamos de falar eram transformações bidimensionais.
Também podemos fazer transformações tridimensionais, e
elas são muito semelhantes às que acabamos de falar.
Assim, por exemplo, com rotação, agora em vez de apenas girar ao longo do
eixo x ou y, também podemos girar em torno da dimensão z.
Então, se você quiser usar uma rotação 3D, suas opções agora são Transformar: RotaTey
quantos graus, RotaTex, RotaTez,
ou você pode realmente dizer rotate3d e dar-lhe números ao longo de cada dimensão.
Raramente uso as dimensões 3D.
Mas nós temos as opções.
Temos a rotação, temos a escala, e temos a tradução.
E eles podem realmente fazer algumas coisas realmente interessantes com a forma como você quer que seus
elementos pareçam.
Quando chega a hora de usar transformações, há algumas coisas para pensar.
Normalmente, quando você usa transformações, você as usará com alterações de estado.
Se você se lembrar, isso significa que você pode fazer uma transformação acontecer quando você faz um
on over, ou um on focus, ou um on active.
Se você está realmente apenas tentando mudar o aspecto de um elemento desde
o início e deixá-lo assim, você pode querer pensar em apenas tirar fotos
e mexer com as fotos e fazer as coisas off-line.
É mais rápido e não usa tanta largura de banda.
No entanto, é uma maneira legal de brincar com as coisas e
ganhar confiança com seu CSS.
Claro, com tantas coisas que aprendemos nesta aula, é importante
lembrar que muitas vezes você precisará de prefixos de navegador para fazer as transformações funcionarem.
Então, mais uma ferramenta em seu cinto de ferramentas
para aprender a fazer algo emocionante com sua página.
Eu sei que eu não fiz meu exemplo normal aqui, mas
o próximo vídeo vai mostrar um exemplo usando transições, transformações e
algumas das outras coisas que temos aprendido o tempo todo.
Espero que você dê uma olhada e se
sinta um pouco mais confiante sobre o que acabamos de aprender com as transformações.
Boa sorte.