.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.
.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.
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