Olá pessoal! Hoje vou mostrar um tutorial de uma galeria com um efeito CSS3 bem interessante. Ao posicionar o mouse em cima da foto, ela rotaciona, vira para o lado esquerdo, dando um efeito bem legal para a página.

Preview do resultado:



HTML


CSS


Entendendo o HTML


O HTML é bem simples, uma DIV com uma largura definida e centralizada. Dentro delas as fotos que compõem nossa galeria.


Entendendo o CSS


A class .container contém somente os atributos que definem a largura da DIV (550px) e que ela ficará centralizada independente da resolução do monitor do usuário (margin: 0 auto; ).
.container {
    width: 550px;
    margin: 0 auto;
}


A class .container img contém atributos que vão atuar nas imagens dentro da DIV com a class container, vou detalhá-la:
margin: 10px;

Toda imagem terá uma margem de 10px em todos os lados.

border: 5px solid #000000;

Uma borda de 5px na cor preta.

-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

Estes atributos CSS3 definem a sombra atrás da imagem. Vou detalhar mais esses atributos:

-webkit-box-shadow: [b]4px[/b] 4px 4px rgba(0,0,0,0.2);

O primeiro 4px define se a sombra ficará na esquerda ou na direita. Valor positivo, a sombra vai pra direita, valor negativo a sombra vai pra esquerda.

-webkit-box-shadow: 4px [b]4px[/b] 4px rgba(0,0,0,0.2);

O segundo 4px define se a sombra ficará em cima ou embaixo. Valor positivo, a sombra ficará embaixo, valor negativo, a sombra ficará em cima.

-webkit-box-shadow: 4px 4px [b]4px[/b] rgba(0,0,0,0.2);

O terceiro 4px é o blur (esfumaçar). Quanto maior o valor, mais esfumaçado ficará a sombra.

-webkit-box-shadow: 4px 4px 4px [b]rgba(0,0,0,0.2)[/b];

O rgba define a cor e a transparência da sombra de acordo com o padrão rgb. Os valores 0, 0, 0, no padrão RGB, é o preto. Para saber os números RGB de uma determinada cor, basta usar um programa de edição de imagem para tal.

O 0.2 no final, é o canal alpha, esse canal controla a transparência da sombra. Quanto mais perto do 0, mais transparente fica. Se colocar o valor de alpha como 1, ficará sem transparência.

-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;

Esses atributos definem como a animação vai se comportar:
  • Ela afetará toda a foto: All
  • Ela acontecerá em: 0,5s
  • Ela usará um efeito de transição chamado: ease-out


Agora vem a animação em si, o que acontecerá quando o mouse se posicionar em cima da imagem?

Isso é definido na class .container img:hover, vou detalhá-la:
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);

A foto vai rotacionar 7 graus para a esquerda. Valor negativo, a rotação vai para a esquerda, valor positivo, a rotação vai para a direita.

Resultado:


Ok pessoal, por hoje é só. Até a próxima.