CSS
Transformaciones 2D

Sintaxis

• Transformar rotar
• transformar: rotar (<angle>)
• Traducir Transformar
• transformar: traducir (<length-or-percentage> [, <length-or-percentage>]?)
• transform: translateX (<length-or-percentage>)
• transform: translateY (<length-or-percentage>)
• Transformación sesgada
• transformar: sesgar (<angle> [, <angle>]?)
• transformar: skewX (<angle>)
• transformar: skewY (<angle>)
• Transformación de escala
• transform: scale (<scale-factor> [, <scale-factor>]?)
• transform: scaleX (<scale-factor>)
• transform: scaleY (<scale-factor>)
• Transformada de matriz
• transformar: matriz (<número> [, <número>] {5,5})

Parámetros

Observaciones

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Girar

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

Este ejemplo girará la div en 45 grados hacia la derecha. El centro de rotación está en el centro de la división, 50% desde la izquierda y 50% desde la parte superior. Puede cambiar el centro de rotación estableciendo la propiedad de transform-origin .

transform-origin: 100% 50%;

El ejemplo anterior establecerá el centro de rotación en el centro del extremo del lado derecho.

Escala

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

Este ejemplo escalará la div a 100px * 0.5 = 50px en el eje X y a 100px * 1.3 = 130px en el eje Y.

El centro de la transformación está en el centro de la división, 50% desde la izquierda y 50% desde la parte superior.

Traducir

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

Este ejemplo moverá el div en 200px en el eje X y en 100px * 50% = 50px en el eje Y.

También puede especificar traducciones en un solo eje.

En el eje X:

.translate {
    transform: translateX(200px);
}

En el eje Y:

.translate {
    transform: translateY(50%);
}

Sesgar

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

Este ejemplo sesgará la div en 20 grados en el eje X y en - 30 grados en el eje Y.
El centro de la transformación está en el centro de la división, 50% desde la izquierda y 50% desde la parte superior.

Vea el resultado aquí .

Transformaciones multiples

Se pueden aplicar múltiples transformaciones a un elemento en una propiedad como esta:

transform: rotate(15deg) translateX(200px);

Esto girará el elemento 15 grados en el sentido de las agujas del reloj y luego lo traducirá 200 px a la derecha.

En transformadas encadenadas, el sistema de coordenadas se mueve con el elemento . Esto significa que la traducción no será horizontal, pero en un eje, gire 15 grados en el sentido de las agujas del reloj como se muestra en la siguiente imagen:

Cambiar el orden de las transformaciones cambiará la salida. El primer ejemplo será diferente a

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

Como se muestra en esta imagen:

Transformar origen

Las transformaciones se realizan con respecto a un punto que está definido por la propiedad de transform-origin .

La propiedad toma 2 valores: transform-origin: XY;

En el siguiente ejemplo, el primer div ( .tl ) gira alrededor de la esquina superior izquierda con transform-origin: 0 0; y el segundo ( .tr ) se transforma alrededor de la esquina superior derecha con transform-origin: 100% 0 . La rotación se aplica sobre el hover :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

El valor predeterminado para la propiedad de origen de transformación es 50% 50% que es el centro del elemento.