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

Não consigo colocar o efeito 3D nas palavras

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Palavras em 3D

por Francisco Igor
| 62.2k xp | 5 posts

Oi, fiz o que tinha pra fazer, mas as palavras não estão com efeito 3D. Não dá pra ver diferença entre as palavras antes e depois.

Qual o problema com meu código? Desde já obrigado :)

HTML:

<body>
    <header class="titulo-principal">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <ul class=palavara-home>
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>
        <a class="link-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
    </header>

CSS:

.palavra-home {
    font: "Shadows Into Ligh";
    color: #D5447E;
    perspective: 6px;
    position: absolute;

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

.boas-praticas {
    top: 13%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}

.codigo-limpo {
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px);
}

.css3 {
    top: 55%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(2px);
}

.html5 {
    top: 30%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}

.javascript {
    top: 15%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px);
}

.acessibilidade {
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px);
}

.responsivo {
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(3px);
}

.otimizacoes {
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}

.agilidade {
    top: 45%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(5deg) translateZ(1px);
}

.design {
    top: 40%;
    left: 60%;
    transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}
3 respostas
por Estudante
| 719.4k xp | 745 posts

Boa tarde, Francisco! Tudo bem, cara? =)

Toma bastante cuidado com o código. Infelizmente duas classes CSS tem nomes bem parecidos: palavra-home e palavras-home. Sua <ul> deveria ter a classe palavras-home, mas está com a classe palavara-home. Além disso, todas os elementos <li> dessa lista devem ter a classe palavra-home (correto no seu código, já).

Aí vem o CSS. O que você tinha feito em palavra-home, permanece inalterado, mas você deve adicionar algumas propriedades ao palavras-home, assim:

.palavras-home {
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Repare que perspective e o position são dessa classe, não do palavra-home, como você tinha feito. =)

Espero ter ajudado, mas qualquer dúvida não deixe de postar por aqui para que possamos continuar ajudando... E se ainda não tiver resolvido o problema, também!!

Abraço e bons estudos,

Fábio

por Francisco Igor
| 62.2k xp | 5 posts

Oi Fábio,

Fiz as mudanças que você pediu, e ficou com o efeito, mas quando tirei o position do 'palavra-home' as palavras desapareceram. css

.palavras-home {
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.palavra-home {
    font: "Shadows Into Ligh";
    color: #D5447E;
    perspective: 6px;
    position: absolute;

}

html

 <ul class="palavras-home">
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>

Tem alguma coisa errada, ou era pra elas realmente desaparecerem?

Igor Lima

solução!
por Estudante
| 719.4k xp | 745 posts

Opa,

Então... Se não me engano o position: absolute continua na classe palavra-home, também. O que deve sair é o perspective. =)

Fábio