mozilla
Os seus resultados da pesquisa

    transform

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

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

    Note: Gecko (Firefox) accepts a <length> 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

    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.

    Note: 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 Status Comment
    CSS Transforms Level 1 Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) -webkit 3.5 (1.9.1)-moz
    16.0 (16.0)
    9.0 -ms
    10.0
    10.5-o
    12.5
    3.1-webkit
    3D Support 12.0-webkit 10.0-moz
    16.0 (16.0)
    10.0 Não suportado 4.0-webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ? ?

    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

    Etiquetas do documento e colaboradores

    Contribuíram para esta página: rafael.modos, teoli
    Última atualização por: teoli,
    Esconder painel