mozilla
Los resultados de tu búsqueda

    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.

    Resumen

    La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.

    Si la propiedad tiene un valor diferente a none, se creará un contexto de pila. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.

    • Valor inicial none
    • Applies to transformable elements
    • Heredable no
    • Percentages refer to the size of bounding box
    • Media visual
    • Valor calculado as specified, but with relative lengths converted into absolute lengths
    • Animatable yes, as a transform
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Sintaxis

    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)
    
    none
    Especifica que ninguna transformación podrá ser aplicada.
    transform-function
    Especifica el tipo o tipos de funciones transform CSS se aplicarán.

    Funciones CSS transform

    La propiedad CSS transform permite manipular el sistema de coordenadas de un elemento usando las funciones de transformación. Estas funciones son descritas a continuación:

    matrix

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

    Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz (abtxcdty001) \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix}          de un  mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz:  (xprevCoordSysyprevCoordSys1)=(abtxcdty001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+bynewCoordSys+txcxnewCoordSys+dynewCoordSys+ty1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix}

    Nota: Viejas versiones de Gecko (Firefox) aceptan un <length> valor para tx y ty. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades <number> para tx y ty.

    Ejemplos

     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);
    

    Información adicional

    rotate

    transform:  rotate(deg);     /* ej. rotate(90deg) */

    Define una operación de rotación 2D de un elemento, específicando la cantidad de grados (deg) que este rotará en sentido de las macecillas del reloj (según lo especificado por la propiedad transform-origen). La operación corresponde a la matriz [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

    rotateX

    transform:  rotateX(deg);    /* ej. rotate(90deg) */       

    Define una operación de rotación 3D de un elemento en el eje X.

    rotateY

    transform:  rotateY(deg);    /* ej. rotate(90deg) */       

    Define una operación de rotación 3D de un elemento en el eje Y.

    rotateZ

    transform:  rotateY(deg);    /* ej. rotate(90deg) */       

    Define una operación de rotación 3D de un elemento en el eje Z.

    scale

    transform:  scale(sx[, sy]);    /* ej. scale(2.5, 4)*/

    Especifica una operación de escalado 2D descrita por [sx, sy].

    Nota: Si sy no es especificado, se asumirá que tanto sx como sy tendrán el mismo valor

    scaleX

    transform:  scaleX(sx);     /* ej. scale(2.5)*/       

    Especifica una operación de escalado 2D usando el vector [sx, 1].

    scaleY

    transform:  scaleY(sy);    /* ej. scale(4)*/              

    Especifica una operación de escalado 2D usando el vector [1, sy].

    skew

    transform:  skew(ax[, ay]);     /* ej. skew(90deg,180deg)*/    

    Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona ay, no se llevará a cabo el sesgo del eje Y.

    La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.

    Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.

    skewX

    transform:  skewX(deg);     /* ej. skew(90deg)*/        

    Sesga un elemento a lo largo del eje X por el ángulo dado.

    skewY

    transform:  skewY(deg);     /* ej. skew(180deg)*/           

    Sesga un elemento a lo largo del eje Y por el ángulo dado.

    translate

    transform:  translate(tx[, ty]);     /* ej. translate(50px, 100px) */ 

    Especifica una tanslación 2D dada por el vector [tx, ty]. Si ty no es específicada, se asumirá que su valor es cero.

    Cada translation-value puede ser un valor de longuitud o un valor de  porcentaje.

    translateX

    transform:  translateX(tx);     /* ej. translateX(50px) */  

    Translada un elemento a lo largo del eje X.

    translateY

    transform:  translateY(ty);     /* ej. translateY(100px) */    

    Translada un elemento a lo largo del eje Y.

    Especificaciones

    Specification Status Comment
    CSS Transforms Level 1
    The definition of 'transform' in that specification.
    Working Draft  

    Compatibilidad con navegadores

    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.10
    15.0-webkit

    3.1-webkit
    3D Support 12.0-webkit 10.0-moz
    16.0 (16.0)
    10.0 15.0-webkit 4.0-webkit
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? ? ? ? ? ?
    3D Support 2.3 -webkit          

    Notas

    Internet Explorer 5.5 o posterior soporta una propiedad Matrix Filter que se puede utilizar para lograr un efecto similar.

    Gecko 14,0 removido el soporte experimental para skew (), pero fue reintroducido en Gecko 15.0 por razones de compatibilidad. Como este no es un estándar y es probable que se elimine en el futuro, no debería usarse.

     Android 2.3 tiene un error en el que los input form serán "saltados" al escribir, Si algun div tiene una propiedad -webkit-transform.

    Véase También

    Etiquetas y colaboradores del documento

    Contributors to this page: teoli, limonada_prototype, Xaviju, bicentenario
    Última actualización por: bicentenario,