Verificação HTML: CSS: "transform": Muitos valores ou valores não são reconhecidos.

Sobre este problema de CSS

A propriedade CSS transform permite-lhe rodar, redimensionar, inclinar ou transladar um elemento modificando o seu espaço de coordenadas. O validador W3C gera este erro quando o valor atribuído a transform não está em conformidade com a sintaxe CSS válida. Isto acontece tipicamente quando:

O nome de uma função de transformação está mal escrito (por exemplo, rotateZ digitado como rotatez em alguns contextos, ou skew digitado como skeew).
São passados argumentos em excesso a uma função de transformação (por exemplo, rotate(45deg, 20deg) em vez de rotate(45deg)).
Os argumentos não têm as unidades obrigatórias (por exemplo, rotate(45) em vez de rotate(45deg)).
Múltiplas funções de transformação são separadas por vírgulas em vez de espaços.
É usado um nome de função inválido ou inexistente (por exemplo, transform: flip()).
Valores com prefixos de fornecedor como sintaxe -webkit-transform são usados incorretamente na propriedade transform padrão.

Isto é importante para a conformidade com os padrões porque os navegadores podem ignorar silenciosamente uma declaração transform inválida completamente, o que significa que nenhuma das suas transformações pretendidas será aplicada. Detetar estes erros durante a validação ajuda a prevenir problemas inesperados de layout ou visuais.

Cada função de transformação tem uma assinatura específica. Por exemplo, rotate() aceita exatamente um valor de ângulo, translate() aceita um ou dois valores de comprimento/percentagem, e scale() aceita um ou dois números. Fornecer o número ou tipo errado de argumentos desencadeia este erro.

Exemplos

Incorreto: Funções de transformação separadas por vírgulas

Múltiplas transformações devem ser separadas por espaços, não por vírgulas.

<div style="transform: rotate(45deg), scale(1.5);">Transformed</div>

Correto: Funções de transformação separadas por espaços

<div style="transform: rotate(45deg) scale(1.5);">Transformed</div>

Incorreto: Unidade em falta no valor de rotação

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

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

Correto: Valor de ângulo com unidade

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

Incorreto: Argumentos em excesso numa função

A função rotate() aceita apenas um argumento.

<div style="transform: rotate(45deg, 20deg);">Rotated</div>

Correto: Argumento único para `rotate()`

Se precisar de rodar em torno de um eixo específico, use rotateX(), rotateY(), ou rotateZ() em vez disso.

<div style="transform: rotateZ(45deg);">Rotated on Z axis</div>

Incorreto: Função mal escrita ou inexistente

<div style="transform: roate(30deg) scaleX(2);">Transformed</div>

Correto: Nomes de função corretamente escritos

<div style="transform: rotate(30deg) scaleX(2);">Transformed</div>

Incorreto: Usar `translate` sem unidades em comprimentos diferentes de zero

<div style="transform: translate(50, 100);">Moved</div>

Correto: Valores de comprimento com unidades

Um valor de 0 não requer uma unidade, mas todos os outros valores de comprimento requerem.

<div style="transform: translate(50px, 100px);">Moved</div>

Referência de funções de transformação válidas

Aqui estão as funções de transformação comumente usadas e os seus argumentos esperados:

translate(tx) ou translate(tx, ty) — comprimentos ou percentagens
translateX(tx), translateY(ty), translateZ(tz) — um único comprimento/percentagem
scale(sx) ou scale(sx, sy) — números sem unidade
scaleX(sx), scaleY(sy), scaleZ(sz) — um único número sem unidade
rotate(angle) — um único valor de ângulo (por exemplo, 45deg)
rotateX(angle), rotateY(angle), rotateZ(angle) — um único ângulo
skew(ax) ou skew(ax, ay) — valores de ângulo
skewX(ax), skewY(ay) — um único ângulo
matrix(a, b, c, d, tx, ty) — exatamente seis números sem unidade
matrix3d(...) — exatamente dezasseis números sem unidade