Entrar Ainda não tem acesso?
1
resposta

o translateZ não opera como p esperado

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Melhorando a qualidade das palavras

por Pedro Santos e Santos
| 80k xp | 2 posts

Olá! o translateZ aparece no inspetor, mas ele não altera como no exemplo. Acontece apenas uma leve desfocada no elemento. Segue o código:

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>

CSS:

.palavras-home {
  perspective: 6px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.palavra-home {
  font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
}

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


.boas-praticas {
  top: 70%;
    left: 20%;
    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: 70%;
  left: 65%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}

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

.design {
  top: 40%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
  }
1 resposta
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor Lider técnico

Oi Pedro, tudo bom?

Como mostrado no curso a seguir:

Após o exercício anterior, você deve ter notado que as palavras ficaram meio borradas. Isso acontece porque o navegador tenta aumentar as palavras que estão mais próximas na perspectiva. Só que o navegador não faz isso aumentando a fonte; ele faz isso aumentando os pixels da fonte, e por isso a qualidade não é tão boa. Podemos contornar isso aumentando o tamanho da fonte fora da transformação. Assim, na transformação, podemos diminuir a palavra e depois aumentá-la o quanto necessário. A fonte original, por ter uma resolução maior, vai garantir que, nesse segundo aumento, a qualidade será mantida. Ou seja, no nosso código, queremos aumentar quatro vezes (ou mais) o tamanho da fonte para depois usar a transformação scale e voltar ao tamanho original antes de fazer as outras transformações:

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

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

/* mesma coisa para outras palavras */
Faça essas alterações no seu código.


ul {
background-color: #862844
}
.palavras-home {
perspective: 6px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.palavras-home li {
font-size: 400%;
}
.palavra-home {
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
position: absolute;
}

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

.boas-praticas {
top: 70%;
left: 20%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(1px) scale(0.25);;

}

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

}

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

}

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

}

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

}

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

}

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

}

.otimizacoes {
top: 70%;
left: 65%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px) scale(0.25);;
}

.agilidade {
top: 75%;
left: 35%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(1px) scale(0.25);;
}

.design {
top: 40%;
left: 60%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);;
}

Acho que o desfoque era esperado mesmo =)

Abraço