Verificação HTML: CSS: "transform": X não é um valor "transform".

Sobre este problema de CSS

A propriedade CSS transform permite-lhe rodar, escalar, inclinar ou transladar um elemento modificando o seu espaço de coordenadas. O validador verifica CSS inline e incorporado quanto à correção, e irá sinalizar qualquer valor que não reconheça como um valor transform válido. Erros comuns incluem:

Unidades em falta em ângulos ou comprimentos (por exemplo, rotate(45) em vez de rotate(45deg))
Erros de escrita em nomes de funções (por exemplo, rotatee(10deg) ou tranlate(10px))
Tipos de valor errados (por exemplo, usar uma cor ou um número simples onde é esperada uma função)
Vírgulas ou parênteses em falta nos argumentos da função
Usar funções não existentes (por exemplo, flip(180deg) não é uma função transform válida)
Número incorreto de argumentos (por exemplo, matrix() requer exatamente 6 valores)

Isto é importante para conformidade com padrões e renderização previsível. Embora os navegadores possam ignorar silenciosamente valores transform inválidos, o elemento simplesmente não será transformado — o que pode levar a bugs subtis de layout que são difíceis de rastrear. Capturar estes erros no momento da validação ajuda-o a corrigi-los antes de chegarem aos utilizadores.

Exemplos

Inválido: unidade de ângulo em falta

A função rotate() requer um valor com uma unidade de ângulo como deg, rad, turn, ou grad.

<div style="transform: rotate(45);">Texto rodado</div>

Corrigido: adicionando a unidade de ângulo

<div style="transform: rotate(45deg);">Texto rodado</div>

Inválido: erro de escrita no nome da função

<div style="transform: tranlateX(10px);">Texto deslocado</div>

Corrigido: corrigindo o nome da função

<div style="transform: translateX(10px);">Texto deslocado</div>

Inválido: usando um valor não-transform

Um número simples ou palavra-chave não relacionada não é um valor transform válido.

<div style="transform: 200px;">Conteúdo</div>

Corrigido: usando uma função transform adequada

<div style="transform: translateX(200px);">Conteúdo</div>

Inválido: número errado de argumentos para `matrix()`

A função matrix() requer exatamente seis números separados por vírgulas.

<div style="transform: matrix(1, 2, 3);">Conteúdo</div>

Corrigido: fornecendo todos os seis argumentos

<div style="transform: matrix(1, 0, 0, 1, 0, 0);">Conteúdo</div>

Referência de valores transform válidos

Aqui está um resumo de todas as funções transform válidas e os valores de palavra-chave/globais:

<style>
  /* Valor de palavra-chave */
  .no-transform { transform: none; }

  /* Funções de translação */
  .move-a { transform: translate(12px, 50%); }
  .move-b { transform: translateX(2em); }
  .move-c { transform: translateY(3in); }
  .move-d { transform: translateZ(2px); }
  .move-e { transform: translate3d(12px, 50%, 3em); }

  /* Funções de rotação */
  .spin-a { transform: rotate(0.5turn); }
  .spin-b { transform: rotateX(10deg); }
  .spin-c { transform: rotateY(10deg); }
  .spin-d { transform: rotateZ(10deg); }
  .spin-e { transform: rotate3d(1, 2, 3, 10deg); }

  /* Funções de escala */
  .grow-a { transform: scale(2, 0.5); }
  .grow-b { transform: scaleX(2); }
  .grow-c { transform: scaleY(0.5); }
  .grow-d { transform: scaleZ(0.3); }
  .grow-e { transform: scale3d(2.5, 1.2, 0.3); }

  /* Funções de inclinação */
  .lean-a { transform: skew(30deg, 20deg); }
  .lean-b { transform: skewX(30deg); }
  .lean-c { transform: skewY(1.07rad); }

  /* Outras funções */
  .depth { transform: perspective(500px); }
  .matrix-2d { transform: matrix(1, 0, 0, 1, 0, 0); }
  .matrix-3d { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }

  /* Múltiplas funções encadeadas */
  .combo { transform: translateX(10px) rotate(10deg) translateY(5px); }
</style>

Ao resolver este erro, olhe para o valor específico que o validador reporta como inválido. Compare-o com as funções válidas listadas acima, verifique novamente a ortografia, garanta que todos os argumentos têm unidades corretas, e verifique se os parênteses e vírgulas estão adequadamente colocados.