[Dúvida] Como fazer imagens e animações em 3d para o projeto?

Oi Lucas,

Esse efeito foi feito com CSS

• HTML

<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>

• CSS

.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