Efeito
giratório com CSS
O código abaixo
cria um efeito de giro utilizando as duas imagens acima, cujo
objetivo é causar a sensação visual de uma única figura sendo
mostrada em frente e verso. Pode ser muito útil em páginas web para
demonstração de livros ou outros produtos.
As imagens usadas no
exemplo a seguir são, respectivamente, a capa e contracapa do livro
"O Roteirista" de Roni Fais, disponível para venda
no link https://clubedeautores.com.br/livro/o-roteirista.
Código
do efeito giratório
<style>
.flip-container
{
width: 500px;
perspective: 500px;
}
.flipper
{
transition: transform 2s;
}
.flip-container:hover
.flipper{
transform:
rotateY(180deg);
}
</style>
<script
language="JavaScript">
function
mouseDentro(imagem){
imagem.src="contracapa.jpg";
}
function
mouseFora(imagem){
imagem.src="capa.jpg";
}
</script>
<center>
<div
class="flip-container">
<div class="flipper">
<img id=imagem src="capa.jpg" width=500
onMouseOver="mouseDentro(this)"
onMouseOut="mouseFora(this)"/>
</div>
</div>
Significado
do código
A
classe flip-container
define a áre de feito e a perspectiva de giro;
A
classe flipper
define o tempo de duração do efeito;
Em
seguida temos a verificação com hover
se o mouse está passando sobre a área na tela definidas pelas
classes já citadas para que o efeito de rotação possa ser
executado com transform:
rotateY(180deg), simulando um giro de 180 graus.
As
funções JavaScript mouseDentro
e mouseFora substituem,
respectivamente, a capa pela contracapa(espelhada) e a contracapa
pela capa para que durante o efeito de giro oura imagem seja exibida
no lugar.
Para
concluir temos o código html que carrega a imagem de capa inicial, as classes CSS e as
funções JS com o evento onMouseOver.
Obs: Para usar este código basta informar o link ou nomes dos arquivos de imagens desejados no lugar dos arquivos jpg aqui utilizados.
Passa
o mouse sobre a imagem abaixo para ver o resultado.
ATIVIDADES
1)
O que acontece se diminuirmos o valor 500px para 50px?
2)
O que acontece se alterarmos os valor 2x para 10s?
3)
O que acontece se alterarmos o valor 180deg para -180deg?
4)
Faça um estudo mais aprofundado e tente melhor a qualidade do
código.
