Css

Criar um Site Grátis Fantástico
Css

 

 

Manual de Transformação CSS – Guia Completo para Funções e Propriedades de Transformação CSS

 

A transformação CSS permite que você translade, gire, incline, dimensione ou adicione efeitos de perspectiva a elementos HTML.

Este tutorial discute tudo o que você precisa saber para transformar elementos HTML como um profissional.

Índice

  1. transformO que é a propriedade CSS ?

  2. rotate()O que é a função CSS ?

  3. rotateX()O que é a função CSS ?

  4. rotateY()O que é a função CSS ?

  5. rotateZ()O que é a função CSS ?

  6. rotate3d()O que é a função CSS ?

  7. Funções de rotação vs. rotatepropriedades em CSS: qual é a diferença?

  8. scale()O que é a função CSS ?

  9. scale()Função CSS vs. scalePropriedade: Qual é a diferença?

  10. scaleZ()O que é a função CSS ?

  11. scale3d()O que é a função CSS ?

  12. skew()O que é a função CSS ?

  13. translate()O que é a função CSS ?

  14. translateZ()O que é a função CSS ?

  15. translate3d()O que é a função CSS ?

  16. Funções de tradução CSS vs. translatepropriedades: qual é a diferença?

  17. perspective()O que é a função CSS ?

  18. perspective()Função CSS vs. perspectivePropriedade: Qual é a diferença?

  19. matrix()O que é a função CSS ?

  20. Por que a ordem das funções de transformação CSS é importante?

  21. Ferramentas para converter funções de transformação paramatrix()

  22. Coisas importantes para saber sobre transformação de elementos em CSS

  23. Concluindo

Então, sem mais delongas, vamos discutir a transformpropriedade CSS.

transformO que é a propriedade CSS ?

A propriedade CSS transformespecifica o efeito transformacional que você deseja aplicar a um elemento HTML.

Aqui está a sintaxe:

html-element {
  transform: value;
}

A transformpropriedade CSS aceita os seguintes valores:

  • inherit: Transforma o elemento com o valor do seu elemento pai transform.

  • initial: Transforma o elemento HTML com seu transformvalor padrão.

  • matrix(): Transforma o elemento bidimensionalmente com uma matriz de seis valores.

  • matrix3d(): Transforma o elemento HTML tridimensionalmente com uma matriz 4x4 de dezesseis valores.

  • none: Não aplica nenhuma transformação ao elemento HTML.

  • perspective(): Transforma um elemento 3D transformado com uma vista em perspectiva.

  • rotate(): Transforma o elemento girando-o bidimensionalmente.

  • rotate3d(): Transforma o elemento girando-o tridimensionalmente.

  • rotateX(): Transforma o elemento girando-o tridimensionalmente ao longo do eixo X.

  • rotateY(): Transforma o elemento girando-o tridimensionalmente ao longo do eixo Y.

  • rotateZ(): Transforma o elemento HTML girando-o tridimensionalmente ao longo do eixo Z.

  • scale(): Transforma o elemento dimensionando-o bidimensionalmente.

  • scale3d(): Transforma o elemento dimensionando-o tridimensionalmente.

  • scaleX(): Transforma o elemento dimensionando-o ao longo do eixo X.

  • scaleY(): Transforma o elemento dimensionando-o ao longo do eixo Y.

  • scaleZ(): Transforma o elemento HTML dimensionando-o tridimensionalmente ao longo do eixo Z.

  • skew(): Transforma o elemento inclinando-o bidimensionalmente ao longo dos eixos X e Y.

  • skewX(): Transforma o elemento inclinando-o bidimensionalmente ao longo do eixo X.

  • skewY(): Transforma o elemento inclinando-o bidimensionalmente ao longo do eixo Y.

  • translate(): Transforma o elemento HTML traduzindo (movendo)-o bidimensionalmente.

  • translate3d(): Transforma o elemento transladando-o tridimensionalmente.

  • translateX(): Transforma o elemento transladando-o ao longo do eixo X.

  • translateY(): Transforma o elemento transladando-o ao longo do eixo Y.

  • translateZ(): Transforma o elemento transladando-o tridimensionalmente ao longo do eixo Z.

Observação: a transformpropriedade aceita uma ou mais funções de transformação CSS . Por exemplo, aqui está uma declaração válida transform:

div {
  transform: perspective(370px) scaleZ(5) rotate(17deg);
}

No trecho acima, atribuímos três funções de transformação à transformpropriedade. Vamos falar mais sobre alguns dos transformvalores de .

rotate()O que é a função CSS ?

rotate()transforma um elemento girando-o bidimensionalmente em torno de um ponto fixo.

Observação:

  • "Origem da transformação" é o ponto fixo em torno do qual um elemento gira.

  • Você pode definir o ponto fixo do seu elemento usando a transform-originpropriedade CSS. Mas o padrão é center.

Sintaxe da rotate()função CSS

rotate()aceita um único argumento . Aqui está a sintaxe:

element {
  transform: rotate(angle);
}

Observe o seguinte:

  • A rotate(angle)função é equivalente a rotate3d(0, 0, 1, angle)ou rotateZ(angle).

  • O angleargumento especifica o ângulo de rotação do elemento.

  • anglepode ser em graus , grados , radianos ou voltas .

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

  • A direção de escrita do seu navegador determina a direção de rotação do elemento.

  • Um ângulo positivo girará o elemento no sentido horário, na direção da escrita da esquerda para a direita. Já um ângulo negativo girará no sentido anti-horário.

  • Um ângulo positivo girará o elemento no sentido anti-horário em um contexto de escrita da direita para a esquerda. Já um ângulo negativo girará no sentido horário.

Exemplos da rotate()função CSS

Abaixo estão alguns exemplos de como a rotate()função CSS funciona.

Como fazer uma rotação de zero grau em CSS:

img {
  transform: rotate(0deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotate()função para especificar uma rotação de zero grau (0⁰) para o elemento da imagem.

Como fazer uma rotação de 45 graus em CSS:

img {
  transform: rotate(45deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotate()função para especificar uma rotação de quarenta e cinco graus (45⁰) para o elemento da imagem.

Como fazer uma rotação negativa de setenta graus em CSS:

img {
  transform: rotate(-70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotate()função para especificar uma rotação negativa de setenta graus (70⁰) para o elemento da imagem.

rotateX()O que é a função CSS ?

rotateX()transforma um elemento girando-o tridimensionalmente em torno do eixo X.

Ilustração do sistema de coordenadas cartesianas 3D

Um sistema de coordenadas cartesianas tridimensional mostrando os eixos X, Y e Z

Sintaxe da rotateX()função CSS

rotateX()aceita um único argumento. Aqui está a sintaxe:

element {
  transform: rotateX(angle);
}

Observe o seguinte:

  • A rotateX(angle)função é equivalente a rotate3d(1, 0, 0, angle).

  • O angleargumento especifica o ângulo de rotação do elemento.

  • anglepode ser em graus, grados, radianos ou voltas.

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

Exemplos da rotateX()função CSS

Abaixo estão alguns exemplos de como a rotateX()função CSS funciona.

Como fazer uma rotação de zero grau em torno do eixo X:

img {
  transform: rotateX(0deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateX()função para especificar uma rotação de zero grau (0⁰) para a imagem em torno do eixo X.

Como fazer uma rotação de 70 graus em torno do eixo X:

img {
  transform: rotateX(70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateX()função para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo X.

rotateY()O que é a função CSS ?

rotateY()transforma um elemento girando-o tridimensionalmente em torno do eixo Y.

Sintaxe da rotateY()função CSS

rotateY()aceita um único argumento. Aqui está a sintaxe:

element {
  transform: rotateY(angle);
}

Observe o seguinte:

  • A rotateY(angle)função é equivalente a rotate3d(0, 1, 0, angle).

  • O angleargumento especifica o ângulo de rotação do elemento.

  • anglepode ser em graus, grados, radianos ou voltas.

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

Exemplos da rotateY()função CSS

Abaixo estão alguns exemplos de como a rotateY()função CSS funciona.

Como fazer uma rotação de zero grau em torno do eixo Y:

img {
  transform: rotateY(0deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateY()função para especificar uma rotação de zero grau (0⁰) para a imagem em torno do eixo Y.

Como fazer uma rotação de 70 graus em torno do eixo Y:

img {
  transform: rotateY(70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateY()função para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo Y.

rotateZ()O que é a função CSS ?

rotateZ()transforma um elemento girando-o tridimensionalmente em torno do eixo Z.

Sintaxe da rotateZ()função CSS

rotateZ()aceita um único argumento. Aqui está a sintaxe:

element {
  transform: rotateZ(angle);
}

Observe o seguinte:

  • A rotateZ(angle)função é equivalente a rotate3d(0, 0, 1, angle)ou rotate(angle).

  • O angleargumento especifica o ângulo de rotação do elemento.

  • anglepode ser em graus, grados, radianos ou voltas.

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

Exemplos da rotateZ()função CSS

Abaixo estão alguns exemplos de como a rotateZ()função CSS funciona.

Como fazer uma rotação de zero grau em torno do eixo Z:

img {
  transform: rotateZ(0deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateZ()função para especificar uma rotação de zero grau (0⁰) para a imagem em torno do eixo Z.

Como fazer uma rotação de 70 graus em torno do eixo Z:

img {
  transform: rotateZ(70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotateZ()função para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo Z.

rotate3d()O que é a função CSS ?

rotate3d()transforma um elemento girando-o tridimensionalmente em torno dos eixos x, y e z.

Sintaxe da rotate3d()função CSS

rotate3d()aceita quatro argumentos. Aqui está a sintaxe:

element {
  transform: rotate3d(x, y, z, angle);
}

Observe o seguinte:

  • Os argumentos x, ye zsão números que especificam as coordenadas x, y e z.

  • As coordenadas são o eixo em torno do qual o elemento irá girar.

  • O angleargumento especifica o ângulo de rotação do elemento.

  • anglepode ser em graus, grados, radianos ou voltas.

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

Exemplos da rotate3d()função CSS

Abaixo estão alguns exemplos de como a rotate3d()função CSS funciona.

Como fazer uma rotação de 70 graus em torno do eixo Z:

img {
  transform: rotate3d(0, 0, 1, 70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotate3d()função para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo Z.

Como fazer uma rotação de 70 graus em torno dos eixos X, Y e Z:

img {
  transform: rotate3d(1, 1, 1, 70deg);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a rotate3d()função para especificar uma rotação de setenta graus (70⁰) para a imagem em torno dos eixos x, y e z.

Funções de rotação vs. rotatepropriedades em CSS: qual é a diferença?

As funções de rotação CSS e rotateas propriedades CSS fornecem duas maneiras semelhantes de especificar transformações de rotação.

As principais diferenças entre as duas técnicas de rotação são as seguintes:

  • A propriedade CSS rotatepermite girar um elemento sem usar a transformpropriedade CSS.

  • A sintaxe da propriedade CSS rotateé mais curta que sua alternativa de função.

  • A propriedade CSS rotateevita que você tenha que lembrar da ordem específica para posicionar as funções de transformação .

  • Os navegadores calculam a matriz das funções de transformação na ordem em que você as atribuiu à  transform propriedade CSS — da esquerda para a direita.

  • Os navegadores calculam a matriz de propriedades de transformação na seguinte  ordem da matriz de transformação :

    1. translate

    2. rotate

    3. scale

Abaixo estão alguns exemplos.

Como usar  rotate propriedade CSS vs. função para fazer uma rotação de 45 graus

img {
  rotate: 45deg; /* Equivalent to a transform: rotate(45deg) property */
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  rotate propriedade para especificar uma rotação de quarenta e cinco graus (45⁰) para o elemento da imagem.

Como usar  rotate propriedade CSS vs. função para fazer uma rotação de 70 graus em torno do eixo X

img {
  rotate: x 70deg; /* Equal to a transform: rotateX(70deg) property */
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  rotate propriedade para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo X.

Como usar  rotate propriedade CSS vs. função para fazer uma rotação de 70 graus em torno do eixo Y

img {
  rotate: y 70deg; /* Equal to a transform: rotateY(70deg) property */
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  rotate propriedade para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo Y.

Como usar  rotate propriedade CSS vs. função para fazer uma rotação de 70 graus em torno do eixo Z

img {
  rotate: z 70deg; /* Equal to a transform: rotateZ(70deg) property */
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  rotate propriedade para especificar uma rotação de setenta graus (70⁰) para a imagem em torno do eixo Z.

Como usar  rotate propriedade CSS vs. função para fazer uma rotação de 70 graus em torno dos eixos X, Y e Z

img {
  rotate: 1 1 1 70deg; /* Equal to a transform: rotate3d(1, 1, 1, 70deg) property */
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  rotate propriedade para especificar uma rotação de setenta graus (70⁰) para a imagem em torno dos eixos x, y e z.

Nota:  Um  none valor informa aos navegadores  para não  girar o elemento selecionado.

scale() O que é a função CSS  ?

scale() transforma um elemento redimensionando-o (escalando-o) bidimensionalmente a partir de um ponto fixo.

Observação:

  • "Origem da transformação" é o ponto fixo a partir do qual o computador dimensiona um elemento.

  • Você pode definir o ponto fixo do seu elemento usando a  transform-origin propriedade CSS. Mas o padrão é  center.

Sintaxe da  scale() função CSS

scale() aceita dois argumentos. Aqui está a sintaxe:

element {
  transform: scale(x, y);
}

Observe o seguinte:

  • O  x argumento pode ser um número ou uma porcentagem. Ele especifica o fator de escala do elemento ao longo do eixo x.

  • O  y argumento também pode ser um número ou porcentagem. Ele define o fator de escala do elemento ao longo do eixo y.

  • O valor padrão do eixo Y é  x. Portanto, se você não fornecer um  y argumento, o navegador usará automaticamente  xo valor de .

  • Suponha que  x e  y sejam iguais. Nesse caso, os navegadores dimensionarão seu elemento uniformemente e preservarão sua proporção.

Ilustração do sistema de coordenadas cartesianas 2D

Um sistema de coordenadas cartesianas bidimensional mostrando os eixos X e Y

Exemplos da  scale() função CSS

Abaixo estão alguns exemplos de como a  scale() função CSS funciona.

Como dimensionar um elemento uniformemente ao longo dos eixos X e Y em CSS:

img {
  transform: scale(0.3);
  transform-origin: left;
}

Experimente no StackBlitz

O snippet acima usou a  scale() função para especificar um  0.3 fator de escala para o elemento de imagem ao longo dos eixos X e Y.

Observação:

  • scale(0.3) é equivalente a  scale(0.3, 0.3).

  • A equivalência percentual de  scale(0.3) é  scale(30%).

Como dimensionar um elemento de forma não uniforme ao longo dos eixos X e Y em CSS:

img {
  transform: scale(0.3, 65%);
  transform-origin: top left;
}

Experimente no StackBlitz

O snippet acima usou a  scale() função para especificar um  0.3 fator de escala para a imagem ao longo do eixo X e  65% ao longo do eixo Y.

Como dimensionar um elemento somente ao longo do eixo X:

img {
  transform: scale(0.3, 1);
  transform-origin: top left;
}

Experimente no StackBlitz

O snippet acima usou a  scale() função para especificar um  0.3 fator de escala para a imagem somente ao longo do eixo X.

Observação:

  • Um fator de escala de  1 ou  100% informa aos navegadores  para não  aplicar nenhum efeito de escala no elemento selecionado.

  • scale(0.3, 1) é equivalente a  scaleX(0.3).

Como dimensionar um elemento somente ao longo do eixo Y:

img {
  transform: scale(100%, 0.2);
  transform-origin: top left;
}

Experimente no StackBlitz

O snippet acima usou a  scale() função para especificar um  0.2 fator de escala para a imagem somente ao longo do eixo Y.

Observação:

  • Um   fator de escala  100% ou  indica aos navegadores para não  aplicar nenhum efeito de escala no elemento selecionado.1

  • scale(100%, 0.2) é equivalente a  scaleY(0.2).

scale() Função  CSS  vs. scale Propriedade: Qual é a diferença?

scale() A função  CSS  e a scale propriedade CSS fornecem duas maneiras semelhantes de especificar uma transformação de escala.

As principais diferenças entre as duas técnicas de dimensionamento são as seguintes:

  • A propriedade CSS  scale permite dimensionar um elemento sem usar a  transform propriedade CSS.

  • A sintaxe da propriedade CSS  scale é mais curta que sua alternativa de função.

  • A propriedade CSS  scale evita que você tenha que lembrar da ordem específica para posicionar as funções de transformação.

  • Os navegadores calculam a matriz das funções de transformação na ordem em que você as atribuiu à  transform propriedade CSS — da esquerda para a direita.

  • Os navegadores calculam a matriz de propriedades de transformação na seguinte ordem:

    1. translate

    2. rotate

    3. scale

Aqui está um exemplo:

Use a  scale propriedade CSS para dimensionar um elemento de forma não uniforme ao longo dos eixos X e Y.

img {
  scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */
  transform-origin: top left;
}

Experimente no StackBlitz

O snippet acima usou a  scale propriedade para especificar um  0.3 fator de escala para a imagem ao longo do eixo X e  65% ao longo do eixo Y.

Nota:  Um  none valor informa aos navegadores  para não  dimensionar o elemento selecionado.

scaleZ() O que é a função CSS  ?

scaleZ() transforma um elemento redimensionando-o (escalonando-o) tridimensionalmente a partir de um ponto fixo ao longo do eixo z.

Observação:

  • "Origem da transformação" é o ponto fixo a partir do qual o computador dimensiona um elemento.

  • Você pode definir o ponto fixo do seu elemento usando a  transform-origin propriedade CSS. Mas o padrão é  center.

Sintaxe da  scaleZ() função CSS

scaleZ() aceita um único argumento. Aqui está a sintaxe:

element {
  transform: scaleZ(number);
}

Observação:

  • A  scaleZ(number) função é equivalente a  scale3d(1, 1, number).

  • O  number argumento especifica o fator de escala do elemento ao longo do eixo z.

Exemplos da  scaleZ() função CSS

Costumamos usar scaleZ()com outras funções CSS, como perspective(), translateZ()e rotateX(). Abaixo estão alguns exemplos.

Como usar scaleZ()com CSS perspective()e rotateX()funções:

img {
  transform: perspective(370px) scaleZ(5) rotateX(17deg);
  width: 80%;
}

Não experimente o StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a perspective()função para definir uma 370pxdistância entre o usuário e o plano z=0 .

  2. A scaleZ()função especifica um fator de escala 5para a imagem ao longo do eixo z.

  3. Usamos a rotateX()função para girar a imagem dezessete graus (17⁰) em torno do eixo x.

Observação:

  • Liste perspective()primeiro sempre que encadeá-lo com outras funções de transformação CSS . Caso contrário, os navegadores podem transformar o elemento selecionado incorretamente.

  • Liste a scaleZ()função antes de rotateX(). Caso contrário, o navegador não dimensionará o elemento.

Como usar scaleZ()com CSS perspective()e translateZ()funções:

img {
  width: 40%;
}

.second-image {
  transform: perspective(370px) scaleZ(5) translateZ(30px);
}

Não experimente o StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a perspective()função para definir uma 370pxdistância entre o usuário e o plano z=0.

  2. A scaleZ()função especifica um fator de escala 5para a imagem ao longo do eixo z.

  3. Usamos a translateZ()função para reposicionar os second-imagetrinta pixels ( 30px) longe de sua posição original ao longo do eixo z.

scale3d()O que é a função CSS ?

scale3d()transforma um elemento redimensionando-o (escalonando-o) tridimensionalmente a partir de um ponto fixo ao longo dos eixos x, y e z.

Observação:

  • "Origem da transformação" é o ponto fixo a partir do qual o computador dimensiona um elemento.

  • Você pode definir o ponto fixo do seu elemento usando a transform-originpropriedade CSS. Mas o padrão é center.

Sintaxe da scale3d()função CSS

scale3d()aceita três argumentos. Aqui está a sintaxe:

element {
  transform: scale3d(x, y, z);
}

Os argumentos  x,  ye  zsão números que especificam as coordenadas x, ye z. As coordenadas são o eixo ao longo do qual os navegadores escalarão o elemento.

Exemplos da scale3d()função CSS

Abaixo estão alguns exemplos de como a scale3d()função CSS funciona.

Como usar scale3d()com CSS perspective()e rotateX()funções:

img {
  transform: perspective(370px) scale3d(1, 1, 5) rotateX(17deg);
  width: 80%;
}

Não experimente o StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a perspective()função para definir uma 370pxdistância entre o usuário e o plano z=0.

  2. A  scale3d()função especifica um fator de escala de  1,  1, e  5para a imagem ao longo dos eixos x, ye z.

  3. Usamos a rotateX()função para girar a imagem dezessete graus (17⁰) em torno do eixo x.

Observação:

  • Um fator de escala de não 1aplicará nenhum efeito de escala no elemento.

  • Liste perspective()primeiro sempre que encadear com outras funções de transformação CSS. Caso contrário, os navegadores podem transformar o elemento selecionado incorretamente.

  • Liste a scale3d()função antes de rotateX(). Caso contrário, o navegador não dimensionará o elemento.

Como dimensionar elementos tridimensionalmente:

img {
  width: 40%;
}

.second-image {
  transform: scale3d(5, 3, 0.05);
  transform-origin: top left;
}

Não experimente o StackBlitz

Usamos a  scale3d()função para especificar um fator de escala de  5,  3, e  0.05para a imagem ao longo dos eixos x, ye z.

skew()O que é a função CSS ?

skew()transforma um elemento inclinando-o (enviesando-o) bidimensionalmente em torno de um ponto fixo.

Observação:

  • "Origem da transformação" é o ponto fixo a partir do qual o computador distorce um elemento.

  • Você pode definir o ponto fixo do seu elemento usando a transform-originpropriedade CSS. Mas o padrão é center.

Sintaxe da skew()função CSS

skew()aceita dois argumentos. Aqui está a sintaxe:

element {
  transform: skew(aX, aY);
}

Observe o seguinte:

  • O aXargumento especifica o ângulo de inclinação do elemento ao longo do eixo x.

  • O aYargumento especifica o ângulo de inclinação do elemento ao longo do eixo y.

  • aXe aYpode estar em graus, grados, radianos ou voltas.

  • Um angleargumento consiste em um número seguido pela unidade que você deseja usar — por exemplo, 45deg.

  • aYé um argumento opcional.

Exemplos da skew()função CSS

Abaixo estão alguns exemplos de como a skew()função CSS funciona.

Como inclinar um elemento somente ao longo do eixo X:

img {
  transform: skew(30deg);
  transform-origin: top;
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a skew()função para aplicar uma inclinação de trinta graus (30⁰) na imagem apenas ao longo do eixo x.

Nota: skew(30deg) é equivalente a skewX(30deg).

Como inclinar um elemento somente ao longo do eixo Y:

img {
  transform: skew(0, 40deg);
  transform-origin: top left;
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a skew()função para aplicar uma inclinação de quarenta graus (40⁰) na imagem apenas ao longo do eixo y.

Observação:

  • 0Um grau de inclinação zero ( ) informa aos navegadores para não aplicar nenhum efeito de inclinação no elemento selecionado.

  • skew(0, 40deg)é equivalente a skewY(40deg).

Como inclinar um elemento ao longo dos eixos X e Y:

img {
  transform: skew(30deg, 40deg);
  transform-origin: top left;
  width: 80%;
}

Não experimente o StackBlitz

O trecho acima usou a skew()função para aplicar uma inclinação de trinta graus (30⁰) na imagem ao longo do eixo x. E quarenta graus (40⁰) ao longo do eixo y.

translate()O que é a função CSS ?

translate()transforma um elemento reposicionando-o (traduzindo-o) bidimensionalmente.

Sintaxe da translate()função CSS

translate()aceita dois argumentos. Aqui está a sintaxe:

element {
  transform: translate(x, y);
}

Observe o seguinte:

  • O xargumento pode ser um valor de comprimento ou porcentagem. Ele especifica a distância que você deseja mover o elemento de sua posição original no eixo x.

  • O yargumento pode ser um valor de comprimento ou porcentagem. Ele define a distância que você deseja mover o elemento de sua posição original no eixo y.

  • yé um argumento opcional.

Exemplos da translate()função CSS

Abaixo estão alguns exemplos de como a translate()função CSS funciona.

Como transladar um elemento somente ao longo do eixo X:

img {
  transform: translate(150px);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a translate()função para reposicionar a imagem 150pxpara longe de sua posição original ao longo do eixo x.

Você também pode escrever assim, especificando X:

img {
  transform: translateX(150px);
  width: 80%

Nota: translate(150px) é equivalente a translateX(150px).

Como transladar um elemento somente ao longo do eixo Y:

img {
  transform: translate(0, 55%);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a translate()função para reposicionar a imagem 55%para longe de sua posição original ao longo do eixo y.

Observação:

  • 0Uma distância de translação zero ( ) informa aos navegadores para não aplicar nenhum efeito de translação no elemento selecionado.

  • translate(0, 55%)é equivalente a translateY(55%).

Como traduzir um elemento ao longo dos eixos X e Y:

img {
  transform: translate(60%, 300px);
  width: 80%;
}

Não experimente o StackBlitz

O snippet acima usou a translate()função para reposicionar a imagem 60%para longe de sua posição original ao longo do eixo x e 300pxde seu eixo y.

translateZ()O que é a função CSS ?

translateZ()transforma um elemento reposicionando-o (translando-o) tridimensionalmente ao longo do eixo z.

Ilustração do sistema de coordenadas cartesianas 3D

Um sistema de coordenadas cartesianas tridimensional mostrando os eixos X, Y e Z

Sintaxe da translateZ()função CSS

translateZ()aceita um único argumento. Aqui está a sintaxe:

element {
  transform: translateZ(length);
}

O  length argumento especifica a distância que você deseja mover o elemento de sua posição original no eixo z.

Ilustração do argumento de comprimento do CSS translateZ

Um sistema de coordenadas cartesianas tridimensional com uma seta vermelha definindo o comprimento de translaçãoZ do plano verde

Exemplos da  translateZ() função CSS

Costumamos usar  translateZ() com a  perspective() função. Veja alguns exemplos.

Como usar  translateZ() com a  perspective() função CSS:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective() função para definir uma  33px distância entre o usuário e o  plano z=0 .

  2. Usamos a  translateZ() função para reposicionar os  second-image dez pixels ( 10px) longe de sua posição original ao longo do eixo z.

Observação:

  • Suponha que a  second-imageposição do eixo z seja maior ou igual ao  argumentoperspective()  da função  . Nesse caso, a imagem desaparecerá como se estivesse atrás do usuário. Em outras palavras, o item selecionado desaparece quando o usuário está na mesma posição que o elemento (ou quando o elemento está atrás do usuário).

  • Quanto maior a distância do usuário até a posição do eixo z do elemento, menos intenso será o efeito de perspectiva, e vice-versa.

Como usar  translateZ() com uma  70px perspectiva:

img {
  width: 40%;
}

.second-image {
  transform: perspective(70px) translateZ(10px);
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective() função para definir uma  70px distância entre o usuário e o plano z=0.

  2. Usamos a  translateZ() função para reposicionar os  second-image dez pixels ( 10px) longe de sua posição original ao longo do eixo z.

translate3d() O que é a função CSS  ?

translate3d() transforma um elemento reposicionando-o (translando-o) tridimensionalmente ao longo dos eixos x, y e z.

Sintaxe da  translate3d() função CSS

translate3d() aceita três argumentos. Aqui está a sintaxe:

element {
  transform: translate3d(x, y, z);
}

Observe o seguinte:

  • O  x argumento pode ser um valor de comprimento ou porcentagem. Ele especifica a distância que você deseja mover o elemento de sua posição original no eixo x.

  • O  y argumento pode ser um valor de comprimento ou porcentagem. Ele define a distância que você deseja mover o elemento de sua posição original no eixo y.

  • z só pode ser um comprimento — não uma porcentagem. Ele define a distância que você deseja mover o elemento de sua posição original no eixo z.

Exemplos da  translate3d() função CSS

Abaixo estão alguns exemplos de como a  translate3d() função CSS funciona.

Como transladar um elemento apenas ao longo do eixo X

img {
  transform: translate3d(150px, 0, 0);
  width: 80%;
}

Experimente no StackBlitz

O snippet acima usou a  translate3d() função para reposicionar a imagem  150px para longe de sua posição original ao longo do eixo x.

Nota: translate3d(150px, 0, 0)  é equivalente a  translateX(150px).

Como traduzir elementos tridimensionalmente:

img {
  width: 40%;
}

.second-image {
  transform: perspective(300px) translate3d(15%, 45%, 200px);
}

Experimente no StackBlitz

O snippet acima usou a  translate3d() função para reposicionar a imagem  15% para longe de sua posição original ao longo do eixo x,  45% do eixo y e  200px do eixo z.

Funções de tradução CSS vs.  translate propriedades: qual é a diferença?

As funções de tradução CSS e a  translate propriedade CSS fornecem duas maneiras semelhantes de especificar uma transformação de tradução.

As principais diferenças entre as duas técnicas de tradução são as seguintes:

  • A propriedade CSS  translate permite traduzir um elemento sem usar a  transform propriedade CSS.

  • A sintaxe da propriedade CSS  translate é mais curta que sua alternativa de função.

  • A propriedade CSS  translate evita que você tenha que lembrar da ordem específica para posicionar as funções de transformação.

  • Os navegadores calculam a matriz das funções de transformação na ordem em que você as atribuiu à  transform propriedade CSS — da esquerda para a direita.

  • Os navegadores calculam a matriz de propriedades de transformação na seguinte ordem:

    1. translate

    2. rotate

    3. scale

Abaixo estão alguns exemplos.

Como usar  translate propriedade CSS vs. função para traduzir um elemento ao longo dos eixos X e Y

img {
  translate: 60% 300px; /* Equal to a transform: translate(60%, 300px) property */
  width: 80%;
}

Experimente no StackBlitz

O trecho acima usou a  translate propriedade para reposicionar a imagem  60% para longe de sua posição original ao longo do eixo x. E  300px do eixo y.

Observação:  Suponha que você queira transladar um elemento ao longo do eixo z. Nesse caso, defina uma  perspective propriedade no "elemento pai" do elemento que deseja transladar. Caso contrário, o elemento não se moverá ao longo do eixo z.

Como usar  translate propriedade CSS vs. função para traduzir um elemento ao longo do eixo Z

img {
  width: 40%;
}

div {
  perspective: 35px;
}

.second-image {
  translate: 0px 0px 17px; /* Equal to a transform: translateZ(17px) property */
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective propriedade para definir uma  35px distância entre o usuário e o plano z=0.

  2. Usamos a  translate propriedade para reposicionar os  second-image dezessete pixels ( 17px) para longe de sua posição original ao longo do eixo z.

Como usar  translate propriedade CSS vs. função para traduzir um elemento tridimensionalmente

img {
  width: 40%;
}

div {
  perspective: 300px;
}

.second-image {
  translate: 50% 25% 200px; /* Equal to a transform: translate3d(50%, 25%, 200px) property */
}

Experimente no StackBlitz

O snippet acima usou a  translate propriedade para reposicionar a imagem  50% para longe de sua posição original ao longo do eixo x,  25% do eixo y e  200px do eixo z.

Nota:  Um  none valor informa aos navegadores  para não  traduzirem o elemento selecionado.

perspective() O que é a função CSS  ?

perspective() transforma um elemento adicionando alguns efeitos de perspectiva a ele.

Sintaxe da  perspective() função CSS

perspective() aceita apenas um argumento. Aqui está a sintaxe:

element {
  transform: perspective(length);
}

O  length argumento especifica a distância do usuário ao  plano z=0 .

Ilustração do método CSS perspective()

Um sistema de coordenadas cartesianas tridimensional com uma seta vermelha definindo a distância entre o usuário e o plano z=0

Exemplos da  perspective() função CSS

Costumamos usar  perspective() com outras funções CSS, como  translateZ(),  rotateX()e  rotateY(). Abaixo estão alguns exemplos.

Como usar  perspective() com a  translateZ() função CSS:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) translateZ(10px);
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective() função para definir uma  33px distância entre o usuário e o plano z=0.

  2. Usamos a  translateZ() função para reposicionar os  second-image dez pixels ( 10px) longe de sua posição original ao longo do eixo z.

Observe o seguinte:

  • Suponha que a  second-imageposição do eixo z seja maior ou igual ao  perspective() argumento da função. Nesse caso, a imagem desaparecerá como se estivesse atrás do usuário. Em outras palavras, o item selecionado desaparece quando o usuário está na mesma posição que o elemento (ou quando o elemento está atrás do usuário).

  • Quanto maior a distância do usuário até a posição do eixo z do elemento, menos intenso será o efeito de perspectiva, e vice-versa.

Como usar  perspective() com a  rotateY() função CSS:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateY(-10deg);
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective() função para definir uma  33px distância entre o usuário e o plano z=0.

  2. Usamos a  rotateY() função para girar  second-image dez graus negativos (-10⁰) em torno do eixo y.

Como usar  perspective() com a  rotateX() função CSS:

img {
  width: 40%;
}

.second-image {
  transform: perspective(33px) rotateX(17deg);
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective() função para definir uma  33px distância entre o usuário e o plano z=0.

  2. Usamos a  rotateX() função para girar  second-image dezessete graus (17⁰) em torno do eixo x.

perspective() Função  CSS  vs. perspective Propriedade: Qual é a diferença?

perspective() A função  CSS  e a perspective propriedade fornecem duas maneiras semelhantes de adicionar efeitos de perspectiva a elementos HTML.

As principais diferenças entre as duas técnicas de perspectiva são as seguintes:

  • Aplicamos a  perspective() função "diretamente no elemento" ao qual queremos adicionar alguns efeitos de perspectiva.

  • Aplicamos a  perspective propriedade "no elemento pai" do elemento ao qual queremos adicionar alguns efeitos de perspectiva.

  • A  perspective() função funciona como um  transform valor de propriedade.

  • A propriedade CSS  perspective permite que você crie efeitos de perspectiva sem usar a  transform propriedade CSS.

Aqui está um exemplo:

Use a propriedade CSS  perspective para adicionar efeito de perspectiva a um elemento filho:

img {
  width: 40%;
}

div {
  perspective: 33px;
}

.second-image {
  rotate: x 17deg;
}

Experimente no StackBlitz

Veja o que fizemos no snippet acima:

  1. Usamos a  perspective propriedade para definir uma  33px distância entre o usuário e o plano z=0.

  2. Usamos a  rotate propriedade para girar  second-image dezessete graus (17⁰) em torno do eixo x.

Observação:

  • A propriedade CSS  perspective evita que você tenha que lembrar da ordem específica para posicionar as funções de transformação.

  • Um  none valor informa aos navegadores  para não  adicionar nenhum efeito de perspectiva aos filhos do elemento selecionado.

matrix() O que é a função CSS  ?

A função CSS  matrix() é uma abreviação para as seguintes funções de transformação 2D:

  • scaleX()

  • skewY()

  • skewX()

  • scaleY()

  • translateX()

  • translateY()

Em outras palavras, em vez de escrever:

img {
  transform-origin: 0 0;
  transform: translateX(100px) translateY(250px) scaleX(2) scaleY(0.9)
    skewX(10deg) skewY(35deg);
  width: 80%;
}

Experimente no StackBlitz

Você pode alternativamente usar a  matrix() função para encurtar seu código assim:

img {
  transform-origin: 0 0;
  transform: matrix(2.24693, 0.630187, 0.352654, 0.9, 100, 250);
  width: 80%;
}

Experimente no StackBlitz

matrix() A sintaxe da função CSS 

A  matrix() função aceita seis valores. Aqui está a sintaxe:

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Você pode representar os valores da matriz CSS como  coordenadas homogêneas  em  ℝℙ 2  assim:

| scX skX tX | ← x-axis
| skY scY tY | ← y-axis
|  0   0   1 | ← constants

Observe o seguinte:

  • scX e  skX são números que descrevem a escala de um elemento e a transformação linear de inclinação no eixo x.

  • tX é um número que representa a translação de um elemento no eixo x.

  • skYe scYsão números que descrevem a inclinação de um elemento e a transformação linear de escala no eixo y.

  • tYé um número que representa a translação de um elemento no eixo y.

  • 0, 0, 1são constantes.

  • Não passamos as constantes como  argumentos  para a  matrix()função porque o computador as implica automaticamente.

Exemplos da matrix()função CSS

Abaixo estão alguns exemplos da matrix()função CSS.

Como converter scaleX()para matrix()função:

Considere a seguinte transformpropriedade:

img {
  transform-origin: 0 0;
  transform: scaleX(2);
  width: 80%;
}

Não experimente o StackBlitz

Aqui está o matrix()equivalente da scaleX()função acima:

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 1, 0, 0); /* scX, skY, skX, scY, tX, tY */
  width: 80%;
}

Não experimente o StackBlitz

Vamos também representar os valores da matriz como coordenadas homogêneas em ℝℙ 2 :

| 2 0 0 | ← x-axis
| 0 1 0 | ← y-axis
| 0 0 1 | ← constants

Abaixo está outro exemplo.

Como converter translateY()para matrix()função:

img {
  transform-origin: 0 0;
  transform: translateY(250px);
  width: 80%;
}

Não experimente o StackBlitz

Aqui está o matrix()equivalente da translateY()função acima:

img {
  transform-origin: 0 0;
  transform: matrix(1, 0, 0, 1, 0, 250); /* scX, skY, skX, scY, tX, tY */
  width: 80%;
}

Não experimente o StackBlitz

Vamos também representar os valores da matriz como coordenadas homogêneas em ℝℙ 2 :

| 1 0 0   | ← x-axis
| 0 1 250 | ← y-axis
| 0 0 1   | ← constants

Abaixo está um terceiro exemplo.

Como converter translateX()e scale()funcionar matrix():

img {
  transform-origin: 0 0;
  transform: translateX(100px) scale(2);
  width: 80%;
}

Não experimente o StackBlitz

Aqui está a sintaxe para converter o transformvalor da propriedade acima para matrix():

matrix = (translateX's homogeneous coordinates) x (scale's homogeneous coordinates)

Vamos começar a conversão definindo translateX(100px)as coordenadas homogêneas de :

| 1 0 100 | ← x-axis
| 0 1 0   | ← y-axis
| 0 0 1   | ← constants

Vamos também definir scale(2)as coordenadas homogêneas de :

| 2 0 0 | ← x-axis
| 0 2 0 | ← y-axis
| 0 0 1 | ← constants

Agora é hora de multiplicar as duas coordenadas homogêneas usando a seguinte sintaxe:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr |
| b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr |
| c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Vamos implementar a sintaxe acima assim:

| 1 0 100 |   | 2 0 0 |   | 2 + 0 + 0   0 + 0 + 0   0 + 0 + 100 |
| 0 1  0  | x | 0 2 0 | = | 0 + 0 + 0   0 + 2 + 0   0 + 0 +  0  |
| 0 0  1  |   | 0 0 1 |   | 0 + 0 + 0   0 + 0 + 0   0 + 0 +  1  |

O próximo passo é resolver a adição. Então, vamos fazer isso agora.

| 1 0 100 |   | 2 0 0 |   | 2 0 100 |
| 0 1  0  | x | 0 2 0 | = | 0 2  0  |
| 0 0  1  |   | 0 0 1 |   | 0 0  1  |

O resultado da adição acima nos dá as coordenadas homogêneas da transform: translateX(100px) scale(2)propriedade.

Em outras palavras, o produto de (translateX's homogeneous coordinates)e (scale's homogeneous coordinates)igual a:

| 2 0 100 | ← x-axis
| 0 2  0  | ← y-axis
| 0 0  1  | ← constants

Portanto, a equivalência matricial de transform: translateX(100px) scale(2)é transform: matrix(2, 0, 0, 2, 100, 0).

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 2, 100, 0);
  width: 80%;
}

Não experimente o StackBlitz

Observe que transform: translateX(100px) scale(2)e transform: scale(2) translateX(100px)retornam matrizes diferentes. Vejamos um exemplo do segundo arranjo abaixo.

Como converter scale()e translateX()funcionar matrix():

Considere a seguinte transformpropriedade:

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

Não experimente o StackBlitz

Aqui está a sintaxe para converter o transformvalor da propriedade acima para matrix():

matrix = (scale's homogeneous coordinates) x (translateX's homogeneous coordinates)

Vamos começar a conversão definindo scale(2)as coordenadas homogêneas de :

| 2 0 0 | ← x-axis
| 0 2 0 | ← y-axis
| 0 0 1 | ← constants

Vamos também definir translateX(100px)as coordenadas homogêneas de :

| 1 0 100 | ← x-axis
| 0 1  0  | ← y-axis
| 0 0  1  | ← constants

Agora é hora de multiplicar as duas coordenadas homogêneas usando a seguinte sintaxe:

| a d g |   | j m p |   | aj + dk + gl   am + dn + go   ap +dq  + gr |
| b e h | x | k n q | = | bj + ek + hl   bm + en + ho   bp + eq + hr |
| c f i |   | l o r |   | cj + fk + il   cm + fn + io   cp + fq + ir |

Vamos implementar a sintaxe acima assim:

| 2 0 0 |   | 1 0 100 |   | 2 + 0 + 0   0 + 0 + 0   200 + 0 + 0 |
| 0 2 0 | x | 0 1  0  | = | 0 + 0 + 0   0 + 2 + 0    0 + 0 + 0  |
| 0 0 1 |   | 0 0  1  |   | 0 + 0 + 0   0 + 0 + 0    0 + 0 + 1  |

O próximo passo é resolver a adição. Então, vamos fazer isso agora.

| 2 0 0 |   | 1 0 100 |   | 2 0 200 |
| 0 2 0 | x | 0 1  0  | = | 0 2  0  |
| 0 0 1 |   | 0 0  1  |   | 0 0  1  |

O resultado da adição acima nos dá as coordenadas homogêneas da transform: scale(2) translateX(100px)propriedade.

Em outras palavras, o produto de (scale's homogeneous coordinates)e (translateX's homogeneous coordinates)igual a:

| 2 0 200 | ← x-axis
| 0 2  0  | ← y-axis
| 0 0  1  | ← constants

Portanto, a equivalência matricial de transform: scale(2) translateX(100px)é transform: matrix(2, 0, 0, 2, 200, 0).

img {
  transform-origin: 0 0;
  transform: matrix(2, 0, 0, 2, 200, 0);
  width: 80%;
}

Não experimente o StackBlitz

Observe que transform: scale(2) translateX(100px)equals transform: matrix(2, 0, 0, 2, 200, 0). E transform: translateX(100px) scale(2)é equivalente a transform: matrix(2, 0, 0, 2, 100, 0).

Em outras palavras, a ordem em que você escreve as funções de transformação importa. Vamos discutir mais sobre isso a seguir.

Por que a ordem das funções de transformação CSS é importante?

A ordem em que você escreve as funções de transformação CSS é importante devido à maneira como os navegadores calculam os valores da matriz.

Por exemplo, considere o seguinte trecho:

div {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: 0 0;
}

.red {
  border: 3px solid red;
  background-color: rgba(255, 0, 0, 0.5);
}

.green {
  border: 3px solid green;
  background-color: rgba(0, 128, 0, 0.5);
  transform: translateX(100px) scale(2);
}

.blue {
  border: 3px solid blue;
  background-color: rgba(0, 0, 255, 0.5);
  transform: scale(2) translateX(100px);
}

Não experimente o StackBlitz

A única diferença entre verde e azul  divé a ordem em que escrevemos suas funções de transformação.

Entretanto, o computador traduziu os dois recipientes usando valores diferentes ( 100pxpara o verde dive 200pxpara o azul).

Então, por que a ordem das funções de transformação afetou os divvalores de translação de s? Eis o motivo:

  • Os navegadores multiplicam as coordenadas homogêneas de cada função de transformação em ordem — da esquerda para a direita.

Em outras palavras, o computador usou a seguinte sintaxe para calcular a divmatriz de Green:

  • divMatriz de Green = (coordenadas homogêneas de translateX) x (coordenadas homogêneas de scale)

E usou a seguinte sintaxe para calcular a divmatriz do azul:

  • divMatriz de Blue = (coordenadas homogêneas da escala) x (coordenadas homogêneas de translateX)

Portanto, a posição das funções de transformação determinou os  argumentos  da matriz porque os navegadores iniciaram o cálculo na ordem da função mais à esquerda para a direita.

Saber como converter funções de transformação para matrix(). E ter algumas ferramentas de conversão pode ser útil. Então, vamos discutir algumas ferramentas úteis que você pode usar.

Ferramentas para converter funções de transformação paramatrix()

As duas ferramentas que você pode usar para fazer uma conversão rápida de funções de transformação matrix()são:

  • window.getComputedStyle()Método JavaScript

  • Ferramenta de resolução de matriz de Eric Meyer e Aaron Gustafson

Como usar window.getComputedStyle()para converter funções de transformação paramatrix()

Suponha que você queira converter as seguintes funções de transformação em matriz:

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

Você adicionará um idatributo ao elemento de imagem:

<img
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
  id="image"
/>

Então, em JavaScript, você irá:

  1. Use o idatributo para obter o elemento de imagem.

  2. Use o window.getComputedStyle()método para obter o transformvalor da propriedade da imagem.

Aqui está o código:

// Get the image element by its id name:
const image = document.getElementById("image");

// Get the image element's transform property's value:
const matrix = window.getComputedStyle(image).getPropertyValue("transform");

// Log the matrix variable's value to the console:
console.log(matrix);

Não experimente o StackBlitz

Por padrão, os navegadores convertem transformo valor de uma propriedade CSS para seu equivalente matricial. Portanto, o snippet acima retornou o valor calculado da imagem.

Vamos agora discutir a segunda ferramenta de conversão.

Como usar a ferramenta de resolução de matriz para converter funções de transformação emmatrix()

Suponha que você queira converter as seguintes funções de transformação em matrix():

img {
  transform-origin: 0 0;
  transform: scale(2) translateX(100px);
  width: 80%;
}

Você fará o seguinte:

  1. Acesse o site The Matrix Resolutions: https://meyerweb.com/eric/tools/matrix/ .

  2. Cole suas funções de transformação ( scale(2) translateX(100px)) no primeiro campo de texto.

  3. Clique no botão "The Red Pill" para gerar a equivalência matricial das funções de transformação.

Captura de tela da ferramenta de resoluções de matriz

Clique no botão da pílula vermelha para converter funções de transformação CSS em uma função matrix()

Dica: Use matrix3d() para criar uma matriz de transformação 3D.

Coisas importantes para saber sobre transformação de elementos em CSS

Aqui estão três fatos essenciais para lembrar quando você transforma elementos em CSS.

1. A transformação cria um contexto de empilhamento

Suponha que você defina a transformpropriedade com qualquer valor diferente de none. Nesse caso, o navegador criará um contexto de empilhamento . E o elemento transformado servirá como um bloco de contenção para quaisquer elementos absolutos ou de posição fixa que ele contenha.

2. Animações de escala e zoom causam problemas de acessibilidade

Sempre que você incluir animações de escala ou zoom no seu aplicativo, ofereça aos usuários a opção de desativá-las. Essa opção é necessária porque animações de escala e zoom causam problemas de acessibilidade .

3. Nem todos os elementos são transformáveis

Você não pode transformar os seguintes modelos de caixa :

Concluindo

Neste artigo, discutimos todas as ferramentas de transformação CSS necessárias para traduzir, girar, inclinar, dimensionar ou adicionar efeitos de perspectiva a elementos HTML.

Espero que você tenha achado este artigo útil.

Obrigado pela leitura!