8
respostas

Palavras estão sumindo da tela

<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>
.palavra-home{
    font-family: "Shadows Into Light", sans-serif;
    color: #D5447E;
    font-size: 30%;
    font-weight: bold;
    position: absolute;
}

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

.palavras-home li{
    font-size: 150%;
}

.palavras-home, .titulo-principal {
    transform-style: preserve-3d;
}
8 respostas

Matheus, boa tarde!

Isso pode estar ocorrendo pois está com um position: absolute em: palavras-home, isso significa que ela vai ficar posicionado em relação ao primeiro antecessor que tiver uma position definida, tente verificar qual antecessor está com essa propriedade e você vai encontrar onde estão as palavras.

Caso ainda estiver com o problema, você pode disponibilizar o código para nós e damos uma olhada

Espero ter ajudado e bons estudos!

Como posso disponibilizar o código pra vocês?

Você pode disponibilizar via Github, mando link pra aqui, e eu olho o código para te ajudar

Não estou conseguindo disponibilizar o código no Github

Se você não estiver conseguindo pode disponibilizar um link do Google Drive aqui

Matheus, boa tarde!

Encontrei a solução, as imagens estão desaparecendo devido a propriedade perspective`que estava com o valor muito baixo, assim quando a tela era renderizada a sensação que o site passava (mais especificamente as palavras da home) era que o usuário estava a 10px do monitor, tornando as palavras muuuito grandes e saindo da tela.

.palavras-home{
    perspective: 50px;

Alterando esse valor para 50px você pode ver que eles se enquadram muito melhor na tela e não ficam "fugindo".

Espero ter ajudado e bons estudos!

Muitas palavras realmente apareceram na tela, mas muitas ainda estão fugindo. Tentei aumentar mais ainda o perspective, porém parece que chega em um ponto que não existe mais diferença, deixando algumas imagens pra fora ainda.