Animação CSS

Transformações

A Propriedade CSS transform permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser movimentados, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.

Uma transição ocorre quando um elemento muda de um estado para outro e o navegador preenche essa mudança de estado com uma sequência de quadros intermediários. Possui um começo e um estado final.

Transformações 2D

Veremos, então, os efeitos visuais em duas dimensões:

translate( )

rotate( )

scale( )

skewX( )

skewY( )

matrix( )

translate( ) => translate permite deslocar um elemento de sua posição atual até certa quantidade de unidades definidas para os eixos X e Y. Este método possui três variantes:

translate(x, y): move o elemento nas duas dimensões.

translateX(x): move o elemento horizontalmente.

translateY(y): move o elemento verticalmente.

Como se pode imaginar, o translate funciona como a junção do translateX e translateY, então iremos utilizar apenas o primeiro no exemplo a seguir.

div {
width : 100px;
height : 100px;
background-color : #00F6FF;
transform: translate (50px, 100px);
}

Passe o mouse

Deslocando

Podemos notar que a div foi movida 50px para a direita e 100px para baixo.

rotate( ) => como se pode imaginar, permite rotacionar um objeto, de um ângulo informado como parâmetro. No exemplo a seguir, a div é rotacionada de 180 graus.

div {
width : 100px;
height : 100px;
background-color : #00F6FF;
transform: rotate (180deg);
}

Passe o mouse

Girando

Caso desejássemos que a rotação se desse no sentido anti-horário, o valor do parâmetro deveria ser negativo.

scale( ) => altera a escala do elemento, ou seja, aumenta ou diminui suas dimensões. Para aumentar as dimensões (nos eixos X, Y ou ambos) deve-se informar valores positivos, já para reduzir as dimensões, os valores devem ser negativos.

Este método possui também três variantes, que são:

scale(x, y): redimensiona o objeto nas duas dimensões.

scaleX(x): redimensiona o objeto horizontalmente.

scaleY(y): redimensiona o objeto verticalmente.

Novamente, utilizaremos apenas o método composto (scale) para exemplificar esta funcionalidade.

div {
width : 100px;
height : 100px;
background-color : #00F6FF;
transform: scale (2,2);
}

Passe o mouse

Aumentando

skew( ) => inclina o elemento de forma que suas laterais e bases formem um determinado ângulo com os eixos X e Y. Assim como o translate e o scale, o skew possui variantes:

skew(x, y): inclina o objeto nas duas dimensões.

skewX(x): inclina o objeto apenas horizontalmente.

skewY(y): inclina o objeto apenas verticalmente.

Utilizando o skew composto, veremos abaixo um exemplo de inclinação nos dois eixos.

div {
width : 100px;
height : 100px;
background-color : #00F6FF;
transform: skew (30deg, 30deg);
}

Passe o mouse

Inclinando

Transformações 3D

Veremos, agora, os seguintes métodos de transformação 3D:

rotateX( )

rotateY( )

rotateZ( )

A propriedade rotate gira um elemento em torno do eixo X, Y ou Z em um determinado grau

seletor {
transform: rotateX(180deg);
}
seletor {
transform: rotateY(180deg);
}
seletor {
transform: rotateZ(180deg);
}

Passe o mouse

Rotate X

Rotate Y

Rotate Z

Perspectiva

Para podemos falar de 3D precisamos também falar de perspectiva, pois não conseguiremos fazer uma figura 3D sem ter o mínimo de noção de perspectiva. Para "adicioná-la" existem duas maneiras, uma seria utilizando diretamente a propriedade "Perspective" ou adicionando um valor perspective() na propriedade Transform.

É preciso entender como a transformação 3D acontece. Criar um objeto 3D é simples, tudo que necessitamos fazer é decidir um estilo para nossa transformação 3D e criar uma perspectiva. Assim podemos começar a mover as formas no nosso espaço 3D. Para relembrar, quando utilizamos uma propriedade 3D, temos que definir todos os prefixos de todos os elementos.

HTML

<div id="container">
<div id="exemploX">Perspectiva X</div>
</div>
<div id="container">
<div id="exemploY">Perspectiva Y</div>
</div>

CSS

#container {
width: 100px;
height: 100px;
perspective: 500px; /* Esta propriedade especifica quantos pixels serão usados para renderização do giro 3D */
}
#exemploX, #exemploY {
width: 100%;
height: 100%; /* Largura e altura precisam ser de 100% para definir a área que o 3D irá aplicar */
color: #000;
text-align: center;
background-color: #00F6FF;
line-height: 100px;
transition-duration: 1s;
}
#exemploX:hover {
transform: rotateX(180deg);
}
#exemploY:hover {
transform: rotateY(180deg);
}

Podemos ver o resultado abaixo

Passe o mouse

Perspectiva X

Perspectiva Y

Criando efeito "vira carta"

Esse efeito é muito conhecido entre os usuários de iPhone. Para obtê-lo se insere em um container dois conteúdos, um na frente e outro no verso e mostra-se um ou outro conteúdo segundo uma animação.

HTML

Para começar, precisamos aplicar a perspectiva para o elemento .container iniciar o espaço 3D.

CSS

.container {
width: 255px; /* Mesma largura da imagem */
height: 350px; /* Mesma altura da imagem */
perspective: 500px;
}

No entanto, a simples aplicação da propriedade "perspective" no seu código não fará com que o objeto seja renderizado de forma tridimensional na tela. O motivo é que, em CSS, para exibir objetos dessa forma, precisamos fazer uso da propriedade "transform-style". No nosso caso, estamos assumindo que a nossa cena está em 3D.

Agora definiremos as dimensões da carta e suas propriedades.

.carta {
width: 100%;
height: 100%;
transition-duration: 1s;
transform-style: preserve-3d;
}

Largura e altura precisam ser de 100% para definir a área que o 3D irá aplicar.

Agora, para fazer com que a parte de trás da carta apareça no verso correto, nós temos que rotacioná-la.

.container:hover .carta {
transform: rotateX(-180deg);
}

Devemos rotacionar também o elemento .frente para que o mesmo não fique invertido após a transição.

.frente {
transform: rotateX(-180deg);
}

E finalmente, aplicamos posição absoluta para os elementos .frente e .verso para que as cartas fiquem relativas ao elemento .container. Largura e altura precisam ser de 100% também para definir a área que o 3D irá aplicar. A propriedade "backface-visibility: hidden" faz com que a face de trás da carta não apareça e nem se sobreponha no momento do efeito.

.frente, .verso {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}

Veja o resultado:

Passe o mouse