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.

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

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)

Valores

<transform-função>

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

none

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

Exemplos

Veja Using CSS transforms.

Exemplo ao vivo:

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].

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

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.

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

Browser compatibility

Notes

Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reason. As it is non-standard and will likely be removed in the future, do not use it.

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