Propriedade Transform-CSS

Como funciona a função translate

A função transform: translate move um elemento de acordo com os eixos X e Y. A sintaxe básica é transform: translate(x, y), onde x e y são os valores de deslocamento nos eixos horizontal e vertical, respectivamente. Esses valores podem ser em unidades de medida CSS, como pixels (px), porcentagens (%), ems, etc.

Por exemplo, transform: translate(50px, 100px) moverá o elemento 50 pixels para a direita e 100 pixels para baixo. Se você usar porcentagens, como transform: translate(50%, 10%), o elemento será movido 50% da largura do seu próprio tamanho para a direita e 10% da altura do seu próprio tamanho para baixo.

É importante notar que a transformação translate não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como funciona a função scale

A função transform: scale redimensiona um elemento, alterando sua largura e altura. A sintaxe básica é transform: scale(sx, sy), onde sx e sy são os fatores de escala nos eixos horizontal e vertical, respectivamente. Esses valores são multiplicadores, onde 1 significa 100% do tamanho original.

Por exemplo, transform: scale(2, 0.5) dobrará a largura do elemento e reduzirá sua altura pela metade. Se você usar apenas um valor, como transform: scale(1.5), o elemento será redimensionado uniformemente em ambos os eixos.

É importante notar que a transformação scale não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como funciona a função rotate

A função transform: rotate gira um elemento em torno de um ponto fixo. A sintaxe básica é transform: rotate(angle), onde angle é o valor do ângulo de rotação. Esse valor pode ser em graus (deg), radianos (rad), gradians (grad) ou voltas (turn).

• graus (deg) - A unidade mais comum para rotação. Um círculo completo é 360 graus.
• radianos (rad) - Uma unidade baseada no raio de um círculo. Um círculo completo é 2π radianos.
• gradians (grad) - Uma unidade onde um círculo completo é 400 gradians. Usada em alguns campos de engenharia.
• voltas (turn) - Uma unidade onde uma volta completa é 1 turn. Um círculo completo é 1 turn.

Por exemplo, transform: rotate(45deg) girará o elemento 45 graus no sentido horário. Se você usar um valor negativo, como transform: rotate(-45deg), o elemento será girado no sentido anti-horário.

É importante notar que a transformação rotate não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como funciona a função origin

A função transform-origin define a origem das transformações aplicadas a um elemento. A sintaxe básica é transform-origin: x y, onde x e y são os valores que determinam a posição da origem das transformações nos eixos horizontal e vertical, respectivamente. Esses valores podem ser em unidades de medida CSS, como pixels (px), porcentagens (%), ou palavras-chave como left, right, top, bottom, e center.

Por exemplo, transform-origin: 50% 50% define a origem das transformações no centro do elemento. Já transform-origin: left top define a origem no canto superior esquerdo do elemento.

É importante notar que a transformação transform-origin não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como funciona a função skew

A função transform: skew inclina um elemento em um ângulo, distorcendo-o ao longo dos eixos X e Y. A sintaxe básica é transform: skew(ax, ay), onde ax e ay são os ângulos de inclinação nos eixos horizontal e vertical, respectivamente. Esses valores podem ser em graus (deg).

Por exemplo, transform: skew(30deg, 20deg) inclinará o elemento 30 graus ao longo do eixo X e 20 graus ao longo do eixo Y. Se você usar apenas um valor, como transform: skew(30deg), o elemento será inclinado apenas ao longo do eixo X.

É importante notar que a transformação skew não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como usar mais de uma propriedade transform

Você pode combinar várias transformações em uma única propriedade transform. Basta separar cada transformação com um espaço. A ordem das transformações é importante e pode afetar o resultado final.

Por exemplo, transform: rotate(45deg) scale(1.5) translate(50px, 100px) primeiro girará o elemento 45 graus, depois redimensionará o elemento em 1.5 vezes o seu tamanho original e, por fim, moverá o elemento 50 pixels para a direita e 100 pixels para baixo.

É importante notar que a transformação transform não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.

Como funciona a função matrix

A função transform: matrix permite aplicar uma transformação complexa a um elemento usando uma matriz de seis valores. A sintaxe básica é transform: matrix(a, b, c, d, e, f), onde cada valor representa uma parte da transformação:

• a - Escala horizontal (similar a scaleX)
• b - Inclinação horizontal (similar a skewY)
• c - Inclinação vertical (similar a skewX)
• d - Escala vertical (similar a scaleY)
• e - Deslocamento horizontal (similar a translateX)
• f - Deslocamento vertical (similar a translateY)

Por exemplo, transform: matrix(1, 0.5, -0.5, 1, 100, 50) aplicará uma transformação que inclui inclinação, escala e deslocamento ao elemento.

É importante notar que a transformação matrix não afeta o fluxo do documento. Isso significa que o espaço original ocupado pelo elemento permanece o mesmo, e outros elementos ao redor não são reposicionados.