Entrar Ainda não tem acesso?
3
respostas

Aula 04 / Exercício 06

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

por Thiago Morette de Oliveira
| 65.4k xp | 24 posts

Parece que as palavras estão se deslocando para fora da página. Testei inclusive copiando o mesmo código das instruções e o resultado foi o mesmo.

Segue html

<body>
    <header class="titulo-principal">
        <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor Web</p>
        <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>
        <a class="banner-twitter" href="http://www.twitter.com/joaodasilva">Siga-me no Twitter</a>
    </header>

Segue CSS

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

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

.boas-praticas {
    top: 70%;
    left: 20%;
    transform: translate(50%, 50%) rotate(-5deg) translateZ(3px);
}

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

Coloquei apenas algumas palavras, mas as outras é o mesmo padrão. Não consigo encontrar meu erro.

3 respostas
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

O código abaixo é o que está no arquivo da aula, comparando com o seu CSS o .palavras-home está diferente, e testei aqui colocando o seu CSS e ele nem apareceu, acredito que seja isso.

.palavras-home {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
}
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    font-size: 400%;
    color: #D5447E;
    position: absolute;
}
.eficiencia {
    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);
}
.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
}
por Thiago Morette de Oliveira
| 65.4k xp | 24 posts

Não resolveu.

Primeiro que as palavras não estão com efeito 3d e segundo, se eu usar o translateZ(2px) > 3px, a palavra sai da tela.

Se caso eu não usar exatamente o código abaixo, as palavras ficam da metade do header para baixo (a metade dele seria o 0%)

.palavras-home {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;

sendo que no exercício, o instrutor informa que pode ser usado tanto esta forma quanto a de baixo

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

Outra diferença também é que no CSS do instrutor não tem o preserve-3d.

Cara, este curso precisa ser reformulado ASAP. Buscando aqui na comunidade, encontrei várias reclamações.

por Andre Lopes
| 175.5k xp | 58 posts

No meu caso aconteceu igual, mas consegui ajustar alterando os valores de top, left