Transformar - Trucos CSS

Anonim

La transformpropiedad le permite manipular visualmente un elemento inclinándolo, rotando, traduciendo o escalando:

.element ( width: 20px; height: 20px; transform: scale(20); )

Incluso con una altura y un ancho declarados, este elemento ahora se escalará a veinte veces su tamaño original:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

Dar a esta función dos valores la estirará horizontalmente el primero y verticalmente el segundo. En el siguiente ejemplo, el elemento ahora tendrá el doble de ancho pero la mitad de alto que el elemento original:

.element ( transform: scale(2, .5); )

O puede ser más específico sin usar la función de taquigrafía:

transform: scaleX(2); transform: scaleY(.5);

Pero scale()es solo una de las muchas funciones de transformación que están disponibles:

Valores

  • scale(): Afecta el tamaño del elemento. Esto también se aplica a la font-size, padding, height, y widthde un elemento, también. También es una función abreviada para las funciones scaleXy scaleY.
  • skewX()y skewY(): inclina un elemento hacia la izquierda o hacia la derecha, como convertir un rectángulo en un paralelogramo. skew()es una taquigrafía que combina skewX()y skewYacepta ambos valores.
  • translate(): Mueve un elemento hacia los lados o hacia arriba y hacia abajo.
  • rotate(): Gira el elemento en sentido horario desde su posición actual.
  • matrix(): Una función que probablemente no esté pensada para escribirse a mano, pero que combina todas las transformaciones en una.
  • perspective(): No afecta al elemento en sí, pero afecta las transformaciones de las transformaciones 3D de los elementos descendientes, lo que les permite a todos tener una perspectiva de profundidad consistente.

Sesgar

/* Skew points along the x-axis */ .element ( transform: skewX(25deg); ) /* Skew point along the y-axis */ .element ( transform: skewY(25deg); ) /* Skew points along the x- and y-axis */ .element ( transform: skew(25deg, 25deg); )

Las funciones de transformación skewXy skewYinclinan un elemento de una forma u otra. Recuerde: no existe una propiedad abreviada para sesgar un elemento, por lo que deberá usar ambas funciones. En el siguiente ejemplo, podemos sesgar un cuadrado de 100 px x 100 px hacia la izquierda y hacia la derecha con skewX:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

Mientras que en este ejemplo podemos sesgar un elemento verticalmente con skewY:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

Ahora usemos skew()para combinar los dos:

Consulte la
propiedad abreviada Pen skew () de CSS-Tricks (@ css-tricks)
en CodePen.

Girar

.element ( transform: rotate(25deg); )

Esto hace girar un elemento en el sentido de las agujas del reloj desde su posición original, mientras que un valor negativo lo haría girar en la dirección opuesta. Aquí hay un ejemplo animado simple donde un cuadrado continúa girando 360 grados cada tres segundos:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

También podemos utilizar los rotateX, rotateYy rotateZfunciones, así:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

Traducir

.element ( transform: translate(20px, 10px); )

Esta función de transformación mueve un elemento hacia los lados o hacia arriba y hacia abajo. ¿Por qué no usar arriba / izquierda / abajo / derecha? Bueno, a veces es un poco confuso. Pensaría en ellos como diseño / posicionamiento (de todos modos, tienen un mejor soporte de navegador) y esto como una forma de mover esas cosas como parte de una transición o animación.

Estos valores serían cualquier valor de longitud, como 10px o 2.4em. Un valor moverá el elemento a la derecha (valores negativos a la izquierda). Si se proporciona un segundo valor, ese segundo valor lo moverá hacia abajo (valores negativos hacia arriba). O puede ser específico:

transform: translateX(value); transform: translateY(value);

Es importante tener en cuenta que el uso de un elemento transformno hará que otros elementos fluyan a su alrededor. Al usar la translatefunción a continuación y empujar el cuadrado verde fuera de su posición original, notaremos cómo el texto circundante permanecerá fijo en su lugar, como si el cuadrado fuera un elemento de bloque:

Vea la explicación de Pen Transform por CSS-Tricks (@ css-tricks) en CodePen.

También vale la pena señalar que translatese acelerará por hardware si desea animar esa propiedad, a diferencia de position: absolute.

Varios valores

Con una lista separada por espacios, puede agregar varios valores a la transformpropiedad:

.element ( width: 20px; height: 20px; transform: scale(20) skew(-20deg); )

Vale la pena señalar que hay un orden en el que se llevarán a cabo estas transformaciones, en el ejemplo anterior, se realizará "sesgo" primero y luego se escalará el elemento.

Matriz

La matrixfunción de transformación se puede utilizar para combinar todas las transformaciones en una. Es un poco como transformar la taquigrafía, solo que no creo que realmente esté destinado a escribirse a mano. Existen herramientas como The Matrix Resolutions, que pueden convertir un grupo de transformaciones en una única declaración de matriz. Quizás, en algunas situaciones, esto pueda reducir el tamaño del archivo, aunque las microoptimizaciones hostiles al autor como esa probablemente no valgan la pena.

Para los curiosos, esto:

rotate(45deg) translate(24px, 25px)

también se puede representar como:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

Transformaciones 3D

La mayoría de las propiedades anteriores tienen versiones 3D de ellas.

translate3d(x, y, z) translateZ(z)

El tercer valor en translate3do el valor en translateZmueve el elemento hacia el espectador, los valores negativos lo alejan.

scale3d(sx, sy, sz) scaleZ(sz)

El tercer valor en scale3do el valor en scaleZafecta la escala a lo largo del eje z (por ejemplo, la línea imaginaria que sale directamente de la pantalla).

rotateX(value) rotateY(value) rotate3d(x, y, z)

rotateXy rotateYrotará un elemento en el espacio 3D alrededor de esos ejes. rotate3dle permite especificar un punto en el espacio 3D en el que rotar el elemento.

matrix3d(… )

Una forma de describir mediante programación una transformación 3D en una cuadrícula de 4 × 4. Nadie escribirá a mano uno de estos, nunca.

perspective(value)

Este valor no afecta al elemento en sí, pero afecta las transformaciones de las transformaciones 3D de los elementos descendientes, lo que les permite tener una perspectiva de profundidad consistente.

Más información

  • MDN Docs sobre transformación y uso.
  • Documentación de David DeSandro sobre transformaciones 3D
  • Surfin 'Safari: transformaciones 3D
  • Especificaciones de W3C sobre transformaciones CSS3
  • Introducción a las transformaciones CSS 3D

Soporte del navegador

Transformaciones 2D

Cromo Safari Firefox Ópera ES DECIR Androide iOS
Alguna 3.1+ 3.5+ 10,5+ 9+ 4.1+ Al menos 4

Transformaciones 3D

Cromo Safari Firefox Ópera ES DECIR Androide iOS
10+ 4+ 12+ ninguno 10+ 4.1+ 5+

Prefijos de proveedores

.element ( -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value; )