Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

translate (50%, 50%)

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

Esta % dentro do translate é referente a qual elemento (ul, li .. ) não entendi muito bem.

1 resposta
solução!

Olá, Denis! Tudo bem? =)

Antes de responder sua pergunta de fato, observe que a classe eficiencia possui o atributo top: 50%, o que deve deixar o elemento na metade da tag pai... O que é verdade, ele faz isso, mas não da forma como esperamos. Você chegou a testar o código só até esse ponto? =)

Caso não tenha feito, já lhe adianto, ele irá deixar a parte superior do elemento na metade do elemento pai. O que queremos na verdade, é centralizar o elemento com o centro da classe pai...

Dito isso, o transform: translate(-50%, -50%) está transladando o próprio elemento, ou seja, aquele que possui a classe eficiencia. Mas 50% do que? Ele pegará a altura do próprio elemento e dividirá pela metade... Esse é o tanto que será deslocado na vertical para cima. A mesma coisa acontecerá na horizontal, ou seja, o elemento será deslocado para a esquerda uma quantia igual a metade da largura do elemento. =)

Espero ter ajudado! =)

Abraço e bons estudos,

Fábio

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software