GALERIA DE IMAGENS 3D COM CSS3
Nessa aula você vai aprender a como criar uma galeria de imagens 3D com CSS3, na verdade será uma galeria de imagens giratória com o efeito 3D.
Requisitos minimos para esta aula: Saber a estrutura básica de HTML 5, CSS 3. A novidade nessa aula serão as variáveis do CSS 3.
Vamos ao que interessa…
Primeiro a estrututa HTML
<body>
<div class="galeria">
<span style="--i:1">
<img src="img/mk1.webp" alt="Code Kong">
</span>
<span style="--i:2">
<img src="img/mk2.webp" alt="Code Kong">
</span>
<span style="--i:3">
<img src="img/mk1.webp" alt="Code Kong">
</span>
<span style="--i:4">
<img src="img/mk2.webp" alt="Code Kong">
</span>
<span style="--i:5">
<img src="img/mk1.webp" alt="Code Kong">
</span>
<span style="--i:6">
<img src="img/mk2.webp" alt="Code Kong">
</span>
<span style="--i:7">
<img src="img/mk1.webp" alt="Code Kong">
</span>
<span style="--i:8">
<img src="img/mk2.webp" alt="Code Kong">
</span>
</div>
</body>Não preciso explicar como funciona aestrutura HTML, para você entender como funciona acesse a aula de extrutura HTML AQUI!
Vamos criar o estilo CSS para ficar igual ao exemplo que está no final desta aula.
body{
margin:0;
height:100vh;
display: grid;
place-items: center;
background-color: #101011;
}
.galeria{
position: relative;
width: 300px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
}No bloco acima está a estilização do <BODY> e da classe pai “galeria”.
Agora vamos tratar a animação da nossa galeria.
@keyframes rotate{
from{
transform:perspective(1200px) rotatey(0deg);
}
to{
transform: perspective(1200px) rotatey(360deg);
}
}Aprenda sobre @keyframes AQUI!
Para a nossa animação precisamos condicionar a nossa variável criada no HTML na tag <span>
<span style=”–i”>
no exemplo usamos a variável “i”, esses dois traços “–” antes do “i” é a maneira de você dizer ao navegador que está declarando uma variável. Existe outra forma de declarar a vairável apenas no documento CSS mas para esta animação resolvi declara-la por meio do style=”” dentro do HTML mesmo.
Após o “i” temos o prefixo “:” seguindo de um número ou seja é o armazenamdo da posição da variável “i” temos 8 posições e cada uma delas recebem um imagem dentro da tag <span>. no código abaixo vai ficar mais claro.
.galeria span{
position: absolute;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotatey(calc(var(--i) * 45deg)) translateZ(380px);
}Você pode aprender sobre as propriedades “transform” do CSS3 AQUI!
No quadro acima exite uma função CSS 3 a “calc” Você pode aprender sobre a função calc AQUI!
No código abaixo vamos formatar a nossas imagens.
.galeria span img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}Agora tudo está funcionando corretamente, veja o exemplo de como ficou a nossa galeria de imagens com rotação 3D, clique no botão abaixo.
Baixe o projeto completo clicando no botão abaixo.
Para aprender mais sobre animações e truques do CSS 3 clique AQUI!
Siga as nossas redes sociais:
Gostou do conteúdo? Comente e compartilhe com os seus amigos, isso nos motivará a trazer mais experiências incríveis para você!
