transform
=========

Resumo
------

A propriedade CSS `transform` permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.

Experimente
-----------

Se a propriedade tem um valor diferente de `none`, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para `position: fixed` para os elementos que estão contidos.

Sintaxe
-------
```

Gramática Formal: <transform-função> [<transform-função>]* | none
```



```css
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)
```


A propriedade transform pode ser especificada com a palavra reservada `none` ou com uma das várias funções disponíveis.

Se `perspective()` é uma das múltiplas funções atribuídas à transform, então ela obrigatoriamente deve ser a primeira.

### Valores

`<transform-função>`

Uma ou mais das funções CSS transform para serem aplicadas, veja abaixo.

`none`

Especifica que nenhuma função transform deve ser aplicada.

Exemplos
--------

Veja Using CSS transforms.

### Exemplo ao vivo


```css
pre {
  width: 33em;
  border: solid red;

  -webkit-transform: translate(100px) rotate(20deg);
  -webkit-transform-origin: 60% 100%;

  -o-transform: translate(100px) rotate(20deg);
  -o-transform-origin: 60% 100%;

  transform: translate(100px) rotate(20deg);
  transform-origin: 60% 100%;
}
```

CSS transform functions
-----------------------

The `transform` CSS property allows the coordinate system used by an element to be manipulated using **transform functions**. These functions are described below.

### matrix
```

transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d build the transformation matrix
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */
```


Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation **matrix [a b c d tx ty]**.

**Nota:** Gecko (Firefox) accepts a `<length>` (en-US) value for **tx** and **ty**. Webkit (Safari, Chrome) and Opera currently support a unitless `<number>` for **tx** and **ty**.

#### Live examples
```

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
```


```
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);
```


#### See also

* Examples of linear transformation matrices Wikipedia
* Coordinate transformation matrices mathamazement.com
* Microsoft's matrix filter MSDN
### rotate
```

transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */
```


Rotates the element clockwise around its origin (as specified by the `transform-origin` property) by the specified `angle`. The operation corresponds to the matrix **[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]**.

### scale
```

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */
```


Specifies a 2D scaling operation described by **[sx, sy]**. If `sy` isn't specified, it is assumed to be equal to `sx`.

### scaleX
```

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */
```


Specifies a scale operation using the vector **[sx, 1]**.

### scaleY
```

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */
```


Specifies a scale operation using the vector **[1, sy]**.

### skew

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
```

transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */
```


Skews the element around the X and Y axes by the specified angles. If `ay` isn't provided, no skew is performed on the Y axis.

**Nota:** The `skew()` function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.

To achieve the same effect, use `skewX()` if you were using `skew()` with one parameter or `matrix(1, tan(ax)`*,* `tan(ay), 1, 0, 0)` for the general way. Note that *tan()* isn't a CSS function and you have to precalculate it yourself.

### skewX
```

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */
```


Skews the element around the X axis by the given `angle`.

### skewY
```

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */
```


Skews the element around the Y axis by the given `angle`.

### translate
```

transform:  translate(tx[, ty])  /* one or two <length> values */
```


Specifies a 2D translation by the vector **[tx, ty]**. If `ty` isn't specified, its value is assumed to be zero.

### translateX
```

transform:  translateX(tx)       /* see <length> for possible values */
```


Translates the element by the given amount along the X axis.

### translateY
```

transform:  translateY(ty)       /* see <length> for possible values */
```


Translates the element by the given amount along the Y axis.

Specifications
--------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS Transforms
* More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
* A cross-browser 2D transform plugin for jQuery