Transformações CSS 2D

Índice

    Mostrar índice

Transformações CSS 2D

As transformações CSS permitem mover, girar, dimensionar e inclinar elementos.

Passe o mouse sobre o elemento abaixo para ver uma transformação 2D:

2D rotate

Neste capítulo você aprenderá sobre a seguinte propriedade CSS:

transform

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
transform 36.0
 10.0
 16.0
 9.0
 23.0

Métodos de transformação CSS 2D

Com a propriedade CSS transform você pode usar os seguintes métodos de transformação 2D:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Dica: você aprenderá sobre transformações 3D no próximo capítulo.

O método translate()

Translate

O método translate() move um elemento de sua posição atual (de acordo com aos parâmetros fornecidos para o eixo X e o eixo Y).

O exemplo a seguir move o elemento <div> 50 pixels para a direita, e 100 pixels abaixo de sua posição atual:

Exemplo

div
{
   
transform: translate(50px, 100px);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

O método rotate()

O método rotate() gira um elemento no sentido horário ou anti-horário de acordo com um determinado grau.

O exemplo a seguir gira o elemento <div> no sentido horário em 20 graus:

Exemplo

div
{
  transform: rotate(20deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

Usar valores negativos girará o elemento no sentido anti-horário.

O exemplo a seguir gira o elemento <div> no sentido anti-horário em 20 graus:

Exemplo

div
{
   
transform: rotate(-20deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

O método escala()

Scale

O método scale() aumenta ou diminui o tamanho de um elemento (de acordo com os parâmetros fornecidos para largura e altura).

O exemplo a seguir aumenta o elemento <div> para duas vezes sua largura original e três vezes sua altura original:

Exemplo

div
{
   
transform: scale(2, 3);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

O exemplo a seguir diminui o elemento <div> para metade de sua largura e altura originais:

Exemplo

div
{
   
transform: scale(0.5, 0.5);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(0.5,0.5);
}
</style>
</head>
<body>

<h1>The scale() Method</h1>

<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

O método scaleX()

O método scaleX() aumenta ou diminui o largura de um elemento.

O exemplo a seguir aumenta o elemento <div> para duas vezes sua largura original:

Exemplo

div
{
   
transform: scaleX(2);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(2);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is two times of its original width.
</div>

</body>
</html>

O exemplo a seguir diminui o elemento <div> para metade de sua largura original:

Exemplo

div
{
   
transform: scaleX(0.5);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleX(0.5);
}
</style>
</head>
<body>

<h1>The scaleX() Method</h1>

<p>The scaleX() method increases or decreases the width of an element.</p>

<div>
This div element is half of its original width.
</div>

</body>
</html>

O método scaleY()

O método scaleY() aumenta ou diminui o altura de um elemento.

O exemplo a seguir aumenta o elemento <div> para três vezes seu valor original altura:

Exemplo

div
{
   
transform: scaleY(3);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(3);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is three times of its original height.
</div>

</body>
</html>

O exemplo a seguir diminui o elemento <div> para metade de seu original altura:

Exemplo

div
{
   
transform: scaleY(0.5);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scaleY(0.5);
}
</style>
</head>
<body>

<h1>The scaleY() Method</h1>

<p>The scaleY() method increases or decreases the height of an element.</p>

<div>
This div element is half of its original height.
</div>

</body>
</html>

O método skewX()

O método skewX() distorce um elemento ao longo do eixo X pelo ângulo fornecido.

O exemplo a seguir inclina o elemento <div> 20 graus ao longo do Eixo X:

Exemplo

div
{
   
transform: skewX(20deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewX(20deg);
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>

<p>The skewX() method skews an element along the X-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

O método skewY()

O método skewY() distorce um elemento ao longo do eixo Y pelo ângulo fornecido.

O exemplo a seguir inclina o elemento <div> 20 graus ao longo do eixo Y:

Exemplo

div
{
   
transform: skewY(20deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skewY(20deg);
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>

<p>The skewY() method skews an element along the Y-axis by the given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

O método skew()

O método skew() distorce um elemento ao longo dos eixos X e Y pelos ângulos fornecidos.

O exemplo a seguir inclina o elemento <div> 20 graus ao longo do eixo X e 10 graus ao longo do eixo Y:

Exemplo

div
{
   
transform: skew(20deg, 10deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg,10deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

Se o segundo parâmetro não for especificado, ele terá valor zero. Portanto, o exemplo a seguir inclina o elemento <div> 20 graus ao longo do eixo X:

Exemplo

div
{
   
transform: skew(20deg);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: skew(20deg);
}
</style>
</head>
<body>

<h1>The skew() Method</h1>

<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>

</body>
</html>

O método matriz()

O método matrix() combina todos os métodos de transformação 2D em um.

O método array() usa seis parâmetros, contendo funções matemáticas, que permite girar, dimensionar, mover (traduzir) e inclinar elementos.

Os parâmetros são os seguintes: matriz(escalaX(), skewY(), skewX(), escalaY(), traduzirX(), traduzirY())

Exemplo

div
{
    
transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>
This a normal div element.
</div>

<div id="myDiv1">
Using the matrix() method.
</div>

<div id="myDiv2">
Another use of the matrix() method.
</div>

</body>
</html>

Propriedades de transformação CSS

A tabela a seguir lista todas as propriedades de transformação 2D:

transform

Aplica uma transformação 2D ou 3D a um elemento

transform-origin

Permite alterar a posição dos elementos transformados

Métodos de transformação CSS 2D

matrix(n,n,n,n,n,n)

Define uma transformação 2D, usando uma matriz de seis valores

translate(x,y)

Define uma translação 2D, movendo o elemento ao longo dos eixos X e Y

translateX(n)

Define uma translação 2D, movendo o elemento ao longo do eixo X

translateY(n)

Define uma translação 2D, movendo o elemento ao longo do eixo Y

scale(x,y)

Define uma transformação de escala 2D, alterando a largura e a altura dos elementos

scaleX(n)

Define uma transformação de escala 2D, alterando a largura do elemento

scaleY(n)

Define uma transformação de escala 2D, alterando a altura do elemento

rotate(angle)

Define uma rotação 2D, o ângulo é especificado no parâmetro

skew(x-angle,y-angle)

Define uma transformação de inclinação 2D ao longo dos eixos X e Y

skewX(angle)

Define uma transformação de inclinação 2D ao longo do eixo X

skewY(angle)

Define uma transformação de inclinação 2D ao longo do eixo Y