Eu queria saber como faz aquelas imagens em 3d que estão so site da alura, e também como são feitas as animações? o curso está bom, mas estou achando muito básico.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu queria saber como faz aquelas imagens em 3d que estão so site da alura, e também como são feitas as animações? o curso está bom, mas estou achando muito básico.
Oi Lucas,
Esse efeito foi feito com CSS
<div class="homeDestaqueDepoimentos--header-animation">
<img class="homeDestaqueDepoimentos--header-animation-luz"
src="https://www.alura.com.br/assets/img/alura2023/home/selo-animation-luz.1730889067.png" alt="Luz do selo de qualidade Alura" loading="lazy">
<img class="homeDestaqueDepoimentos--header-animation-sombra"
src="https://www.alura.com.br/assets/img/alura2023/home/selo-animation-sombra.1730889067.png" alt="Sombra do selo de qualidade Alura" loading="lazy">
<img class="homeDestaqueDepoimentos--header-animation-selo"
src="https://www.alura.com.br/assets/img/alura2023/home/selo-animation.1730889067.png"
alt="Selo de qualidade Alura" loading="lazy">
</div>
.homeDestaqueDepoimentos--header-animation {
top: 0;
max-width: 525px;
}
.homeDestaqueDepoimentos--header-animation-luz {
position: absolute;
top: -110px;
right: -50px;
max-width: calc(100% + 100px);
}
.homeDestaqueDepoimentos--header-animation-sombra {
position: absolute;
top: 40px;
right: -40px;
max-width: 100%;
animation: seloSombra 5s ease-in-out infinite;
opacity: .5;
}
.homeDestaqueDepoimentos--header-animation-selo {
position: absolute;
top: 0;
right: 0;
max-width: 100%;
animation: seloFloat 5s ease-in-out infinite;
}
@keyframes seloSombra {
0% {
opacity: .5
}
50% {
opacity: 1
}
100% {
opacity: .5
}
}
@keyframes seloFloat {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
50% {
-webkit-transform: translateY(50px);
transform: translateY(50px)
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
Para saber mais: Usando animações CSS