código

    corpo {
        exibição: flexível;
        justificar-conteúdo: centro;
        alinhar itens: centro;
        altura: 100vh;
        margem: 0;
        cor de fundo: #0d0d0d;
        estouro: oculto;
        transição: imagem de fundo com facilidade de 0,5s;
        tamanho do fundo: capa;
        posição de fundo: centro;

    }

    /* Contêiner carrossel */
    .carrossel {
        posição: relativa;
        largura: 130px;
        altura: 130px;
        estilo de transformação: preserve-3d;
        perspectiva: 1000px;
        transição: transformação 1s;
    }

    /* Estilos de imagem */
    .carousel img {
        posição: absoluta;
        altura: 100%;
        largura: 100%;
        /* largura: 150px;
        altura: 150px; */
        raio da borda: 10px;
        sombra da caixa: 0 0 10px rgba (255, 110, 199, 0,3);
        origem da transformação: centro;
        transição: transformar 0,5s, filtrar 0,5s;
        opacidade: 0,8;
    }

    /* Posiciona cada imagem em torno do eixo Y */
    .carousel img:nth-child(1) {transformação: girarY(0deg) traduzirZ(150px); }
    .carousel img:nth-child(2) {transformação: girarY(72deg) traduzirZ(150px); }
    .carousel img:nth-child(3) {transformação: girarY(144deg) traduzirZ(150px); }
    .carousel img:nth-child(4) {transformação: girarY(216deg) traduzirZ(150px); }
    .carousel img:nth-child(5) {transformação: girarY(288deg) traduzirZ(150px); }

    /* Ícones de controle */
    .controles {
        posição: absoluta;
        inferior: 20px;
        esquerda: 20px;
        exibição: flexível;
        lacuna: 10px;
    }
    Botão .controls {
        largura: 40px;
        altura: 40px;
        tamanho da fonte: 18px;
        fronteira: nenhuma;
        cor de fundo: #181616;
        cor: #fff;
        cursor: ponteiro;
        raio da fronteira: 50%;
        transição: cor de fundo 0,3s;
    }
    Botão .controls: passar o mouse {
        cor de fundo: #555;
    }