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

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

Pessoal, ao fazer as alterações do exercício anterior as palavras apenas mudaram de local, o translateZ não fez nenhum efeito. Tentei colocar o prefixo do navegador que estou utilizando como teste mas mesmo assim ainda não da o efeito esperado.

Agora nesse exercicio ao alterar o tamanho da fonte e em seguida colocar o scale em cada uma das palavras as mesma diminuem seu tamanho consideravelmente além de mudarem de local.

Alguém sabe o que estou fazendo de errado? rs

4 respostas

Oi Daiane, tudo bem?Você poderia postar seu código aqui pra gente ver o que pode estar errado?

Claro. O codigo css está assim

.palavra-home {
      font-family: "Shadows Into Light", cu rsive;
      font-weight: bold;
      color: #D5447E;
      position: absolute;
      perspective: 6px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
  }

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

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

As outras palavras estao iguais a essa .eficiencia, só os valores do top, left, rotate e translateZ que estão diferentes.

solução!

Oi Daiene, tudo bem?

Para conseguirmos ver as mudanças do translateZ precisamos mudar a perspectiva:

body {
    -webkit-perspective: 6px;
            perspective: 6px;
    -webkit-perspective-origin: 50% 160px;
            perspective-origin: 50% 160px;
}

Tenta por essa regra e nos diga se as palavras agora estão como deveriam.

Espero ter ajudado,

Abcs!

Deu certo aqui.

Obrigada Natan!