Transformaciones CSS

Cómo trabajar con CSStransformpropiedad

Las transformaciones le permiten trasladar, rotar, escalar y sesgar elementos, en el espacio 2D o 3D. Son una característica CSS muy interesante, especialmente cuando se combinan con animaciones.

Transformaciones 2D

lostransformpropiedad acepta esas funciones:

  • translate()mover elementos alrededor
  • rotate()rotar elementos
  • scale()escalar elementos en tamaño
  • skew()torcer o inclinar un elemento
  • matrix()una forma de realizar cualquiera de las operaciones anteriores utilizando una matriz de 6 elementos, una sintaxis menos fácil de usar pero menos detallada

También tenemos funciones específicas de eje:

  • translateX()para mover elementos en el eje X
  • translateY()para mover elementos en el eje Y
  • scaleX()para escalar elementos en tamaño en el eje X
  • scaleY()para escalar elementos en tamaño en el eje Y
  • skewX()torcer o inclinar un elemento en el eje X
  • skewY()torcer o inclinar un elemento en el eje Y

Aquí hay un ejemplo de una transformación que cambia el.boxel ancho del elemento por 2 (duplicándolo) y el alto por 0.5 (reduciéndolo a la mitad):

.box {
	transform: scale(2, 0.5);
}

transform-originvamos a establecer el origen (el(0, 0)coordenadas) para la transformación, lo que nos permite cambiar el centro de rotación.

Combinando múltiples transformaciones

Puede combinar varias transformaciones separando cada función con un espacio.

Por ejemplo:

transform: rotateY(20deg) scaleX(3) translateY(100px);

Transformaciones 3D

Podemos ir un paso más allá y mover nuestros elementos en un espacio 3D en lugar de en un espacio 2D. Con 3D, estamos agregando otro eje, Z, que agrega profundidad a las imágenes.

Utilizando laperspectivepropiedad puede especificar qué tan lejos está el objeto 3D del visor.

Ejemplo:

.3Delement {
  perspective: 100px;
}

perspective-origindetermina la apariencia de la posición del espectador, cómo lo estamos mirando en los ejes X e Y.

Ahora podemos usar funciones adicionales que controlan el eje Z, que se suma a las otras transformaciones de los ejes X e Y:

  • translateZ()
  • rotateZ()
  • scaleZ()

y las correspondientes abreviaturastranslate3d(),rotate3d()yscale3d()como abreviaturas para usar eltranslateX(),translateY()ytranslateZ()funciones y así sucesivamente.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: