Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Aula 04 - Transmiformações - HTML5 e CSS3 II

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas

por Flávio José dos Passos
| 61.8k xp | 57 posts

Tentei fazer um exemplo sozinho, mas não consegui reproduzir o efeito das palavras no cabeçalho, alguém tem alguma idéia de onde estou errando?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sem título</title>
<style>
    body {
        perspective: 6px;
        perspective-origin: 50% 160px;
}



    section {
        transform-style: preserve-3d;
    }
    .normal {
        width: 100%;
        height: 500px;
        background-color: aqua;        
        margin: 10px;
    }
    .area-principal {
        width: 100%;
        height: 500px;
        background-color: bisque;
        transform-style: preserve-3d;
        position: absolute;
        bottom: 0;
        right: 0;
        top: 0;
        left: 0;
    }

    .bola1 {
        width: 100px;
        height: 100px;
        background-color: #222;
        border-radius: 50%;
        top: 50%;
        left: 60%;
        -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
        transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    }

</style>
</head>

<body>
    <div class="normal"></div>
    <div class="normal"></div>

    <section>
        <div class="area-principal">
            <div class="bola1"></div>
            <div class="bola2"></div>
            <div class="bola3"></div>
            <div class="bola4"></div>
            <div class="bola5"></div>
            <div class="bola6"></div>
        </div>
    </section>
    <div class="normal"></div>
    <div class="normal"></div>
    <div class="normal"></div>
    <div class="normal"></div>
</body>
</html>
2 respostas
solução!
por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor Desenvolvedor e Instrutor

Opa Flávio, tudo bem? Eu fiz uns testes aqui no seu código e cheguei ao seguinte resultado, testa ai pra ver se é oq vc quer (:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sem título</title>
<style>
    body {
        perspective: 6px;
        perspective-origin: 50% 160px;
}



    section {
        transform-style: preserve-3d;
    }
    .normal {
        width: 100%;
        height: 500px;
        background-color: aqua;        
        margin: 10px;
    }
    .area-principal {
        width: 100%;
        height: 500px;
        position: relative;

        background-color: bisque;
        transform-style: preserve-3d;

    }

    .area-principal .bola {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #222;
        border-radius: 50%;
    }

    .bola1 {
        top: 50%;
        left: 60%;
        -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
        transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
    }

    .bola2 {
        top: 20%;
        left: 10%;
    }

</style>
</head>

<body>

    <section>
        <div class="area-principal">
            <div class="bola bola1"></div>
            <div class="bola bola2"></div>
            <div class="bola bola3"></div>
            <div class="bola bola4"></div>
            <div class="bola bola5"></div>
            <div class="bola bola6"></div>
        </div>
    </section>
</body>
</html>

Se realmete era isso q vc queria chegar me dá um toque pra eu te explicar o que eu mudei no seu código! Se não for isso me fala oqq vc ta tentando fazer!

Abração, espero poder ajudar!

por Flávio José dos Passos
| 61.8k xp | 57 posts

As bolinhas não estão passando pela tela com efeito de paralax, que é o efeito que estou procurando.