Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida no Ex. 5 da Aula 4 - Transformações

Olá!

Minhas palavras em 3D ficaram fora da página e sem o resultado esperado.... =(

Poderiam me ajudar por favor?

Segue meu código CSS:

.palavra-home{

    font-family: 'Shadows Into Light', cursive;
    color: #D5447E;
    font-weight: bold;
    position: absolute;
    font-size: .8em;
    perspective: 6px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.eficiencia {

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

Também estou enviando parte do HTML

        <ul>
            <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>
2 respostas
solução!

Descobri o que estava acontecendo...

Estava faltando a classe "titulo-principal" no meu CSS, além disso é preciso enfatizar que as classes palavra-home e palavras-home são diferentes.

Obrigada Bruna ajudou muito seu post estava procurando a solução para o mesmo problema.