mozilla
Los resultados de tu búsqueda

    Uso de CSS transforms

    Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.

    Propiedades de las transformaciones CSS

    Se usan dos propiedades principalmente para definir las transformaciones CSS: transform y transform-origin

    transform-origin
    Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.
    transform
    Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.

    Ejemplo: Rotando

    Este ejemplo crea un iframe que permite visualizar la página de Google rotada 90 grados desde su lado inferior izquierdo.

    Ver ejemplo 
    Ver imágen del ejemplo

    <div style="transform: rotate(90deg); transform-origin: bottom left;">
      <iframe src="http://www.google.com/" width="500" height="600"></iframe>
    </div>
    

    Ejemplo: Torciendo y desplazando

    Este ejemplo crea un iframe que permite visualizar la página de Google torcida 10 grados y desplazada 150 píxeles en el eje de las X.

    Ver ejemplo 
    Ver imágen del ejemplo

    <div style="transform: skewx(10deg) translatex(150px);
                transform-origin: bottom left;">
      <iframe src="http://www.google.com/" width="600" height="500"></iframe>
    </div>
    

    Propiedades CSS específicas para 3D

    Realizar cambios en las propiedades CSS en el espacio es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar como los elementos 2D interactuarán en dicho espacio.

    Definiendo una perspectiva

    El primer elemento a definir es la perspectiva. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.

    Definímos como de rápido se encogen con la propiedad perspective. Cuánto más pequeño sea el valor, más profunda será la perspectiva.

    perspective:0; perspective:150px; perspective:300px; perspective:600px;
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6

    El segundo elemento a configurar es la posición del espectador, con la propiedad perspective-origin. Por defecto, la perspectiva está centrada en el espectador, pero no siempre es lo adecuado.

    perspective-origin:150px 150px; perspective-origin:50% 50%; perspective-origin:-50px -50px;
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6
    1
    2
    3
    4
    5
    6

    Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.

    2D elements in the 3D space

    See also

    Etiquetas y colaboradores del documento

    Contributors to this page: another_sam, cristianjav, ajimix, teoli
    Última actualización por: teoli,