Desde colores y fuentes hasta cuadrículas y carruseles, CSS da forma a la apariencia de su sitio web y visitantes.
A medida que profundiza en las posibilidades de CSS, encontrará funciones más avanzadas, como la transformación de CSS, que le permite cambiar las posiciones y formas de los elementos en la página.
Al comprender las propiedades de transformación, desbloqueará formas de crear interfaces únicas y atractivas desde cero. En esta publicación, le mostraré todo lo que necesita saber para comenzar a usar la propiedad de transformación CSS, que incluye:
Sumerjámonos.
¿Qué es la propiedad de transformación CSS?
La propiedad de transformación CSS cambia la forma, la posición y la orientación de los elementos de la página. Los valores de propiedad de transformación de CSS son funciones que transforman el objetivo, incluidas traducir (), escalar () y rotar ().
La regla de transformación CSS se escribe de la siguiente manera:
transform: value(argument);
… dónde valor es una especie de transformación y argumento es el alcance de la aplicación de transformación. Tenga en cuenta que algunas declaraciones de transformación pueden tomar múltiples argumentos.
Pero esa explicación no significa mucho sin ejemplos de la propiedad transform en acción, así que echemos un vistazo a algunos.
Transformaciones CSS 2D
Las transformaciones CSS se pueden dividir en dos categorías, bidimensionales y tridimensionales. Primero, veremos transformaciones bidimensionales. El CSS bidimensional transforma el trabajo en los ejes X (horizontal) e Y (vertical).
En mis ejemplos, aplicaré efectos de transformación a un elemento div cuadrado básico. El div azul representa el elemento sin transformar y el div naranja muestra el mismo elemento con el efecto de transformación aplicado.
Transformación CSS: Traducir
los Traducir() El método traduce o desplaza el elemento de la página hacia arriba, hacia abajo, hacia la izquierda y/o hacia la derecha en la cantidad especificada. Entre paréntesis, el primer número indica la distancia horizontal y el segundo número indica la distancia vertical.
Por ejemplo, podemos traducir nuestro div por el número de píxeles:
ver la pluma Transformación CSS – píxeles por HubSpot (@hubspot) en CódigoPen.
También puede usar porcentajes para especificar una traducción. Los porcentajes mueven el elemento una distancia horizontal/vertical proporcional a su ancho/alto establecido:
ver la pluma Conversión de CSS: porcentajes por HubSpot (@hubspot) en CódigoPen.
Aparte de Traducir()también tenemos traducir X () y traducir () métodos. traducir X () mueve el elemento horizontalmente y toma un argumento:
ver la pluma Convertir CSS: traducirX por HubSpot (@hubspot) en CódigoPen.
Similarmente traducir () El método mueve el elemento verticalmente. Un argumento es suficiente:
ver la pluma Convertir CSS: Traducir por HubSpot (@hubspot) en CódigoPen.
Transformación CSS: escala
los escala() El método cambia el tamaño del objetivo. Si damos un argumento, aumentará o disminuirá el tamaño de nuestro div en un múltiplo de su tamaño original. Por ejemplo:
ver la pluma Transformación CSS: escala 1 por HubSpot (@hubspot) en CódigoPen.
O para reducirlo:
ver la pluma Transformación CSS: escala 2 por HubSpot (@hubspot) en CódigoPen.
Si se dan dos argumentos (separados por una coma), el primer argumento especifica la escala horizontal, el segundo la escala vertical:
ver la pluma Transformación CSS: escala 3 por HubSpot (@hubspot) en CódigoPen.
los escalaX () El método cambia la escala horizontal del elemento. Un argumento es suficiente:
ver la pluma Transformación CSS: scaleX por HubSpot (@hubspot) en CódigoPen.
escalaY () hace lo mismo que escalaX ()pero para la escala vertical:
ver la pluma Transformación CSS: scaleY por HubSpot (@hubspot) en CódigoPen.
Convertir CSS: Rotar
los girar() la función, como puede suponer, gira el elemento. De forma predeterminada, el elemento gira alrededor de su centro. Podemos especificar la rotación en grados, radianes o vueltas (desde 0 vuelta abajo 1 turno):
ver la pluma Transformación CSS: rotar por HubSpot (@hubspot) en CódigoPen.
Conversión de CSS: sesgada
los torcido() sesga o sesga el elemento a lo largo de sus ejes X y/o Y. Sus argumentos especifican los ángulos de sesgo horizontal y vertical, respectivamente.
ver la pluma Transformación CSS: sesgo por HubSpot (@hubspot) en CódigoPen.
sesgar X () sesga nuestro div solo en el eje horizontal:
ver la pluma Conversión CSS: ObliqueX por HubSpot (@hubspot) en CódigoPen.
sesgar Y () hace lo mismo solo en el eje vertical:
ver la pluma Transformación CSS: Oblicua Y por HubSpot (@hubspot) en CódigoPen.
Combinar transformaciones 2D CSS
Si desea aplicar varias transformaciones al mismo selector de CSS, no necesita muchas transformar declaraciones. En su lugar, puede combinar múltiples valores de transformación CSS en una sola declaración simplemente imprimiéndolos con un espacio entre cada uno:
ver la pluma Transformación CSS: muchas transformaciones por HubSpot (@hubspot) en CódigoPen.
Transformaciones CSS 3D
Las transformaciones CSS tridimensionales contienen el eje Z. Si imagina que el ancho y el alto de la pantalla son los ejes X e Y, respectivamente, el eje Z es la «profundidad» de la pantalla.
Aquí hay algunas formas de transformar elementos para agregar esta profundidad:
Transformación CSS: perspectiva
los perspectiva() El valor establece la profundidad del elemento en el eje Z. Cambia cuán «cerca» o «lejos» aparece el elemento. perspectiva() se usa junto con otros métodos de transformación 3D como veremos a continuación.
Transformación CSS: rotarX () y rotarY ()
Como girar(), rotarX () y rotar () los valores rotan nuestro div, pero «alrededor» de los ejes X e Y:
ver la pluma Conversión de CSS: rotarX y rotarY por HubSpot (@hubspot) en CódigoPen.
Cuando estos métodos se utilizan con perspectiva()el elemento girado parece girar hacia nosotros:
ver la pluma Transformación CSS: rotarX y rotarY con perspectiva por HubSpot (@hubspot) en CódigoPen.
traducir del ()
cuando se usa con perspectiva(), traducir del () crea el efecto de un elemento moviéndose hacia adelante o hacia atrás en el eje Z:
ver la pluma Convertir CSS: Traducir por HubSpot (@hubspot) en CódigoPen.
Propiedad de origen de transformación CSS
transformar-origen es otra propiedad de CSS que se puede usar con transformar. los transformar-origen La propiedad cambia la posición de origen, que es el punto en el que comienza la transformación o alrededor del cual se basa.
Puedes verlo más claramente con girar() Método: podemos usar transformar-origen para mover el centro de rotación:
ver la pluma Transformación CSS: inicio de la transformación 1 por HubSpot (@hubspot) en CódigoPen.
El origen también se puede especificar en píxeles desde la esquina superior izquierda del elemento original:
ver la pluma Transformación CSS: inicio de la transformación 2 por HubSpot (@hubspot) en CódigoPen.
Convertir animaciones CSS
Todos nuestros ejemplos hasta ahora han sido estáticos, pero podemos hacerlo mejor. Cualquier método de transformación CSS se puede combinar con transiciones CSS para obtener efectos de animación CSS geniales.
Por ejemplo, podemos codificar un botón flotante interactivo con escala() método. Intente pasar el cursor sobre el div en el ejemplo a continuación.
ver la pluma Convertir CSS: Animación 1 por HubSpot (@hubspot) en CódigoPen.
O podemos crear un efecto de molinete con girar(). Intenta pasar el cursor sobre este div.
ver la pluma Convertir CSS: Animación 2 por HubSpot (@hubspot) en CódigoPen.
Para obtener información más detallada sobre las transiciones CSS y cómo se pueden aplicar a la propiedad de transformación, vea este tutorial en video:
Revisemos.
Hemos cubierto mucho, así que volvamos a todo lo que aprendimos:
- transformar: propiedad CSS para cambiar la forma, la posición y la orientación de los elementos de la página. Puede tomar uno o más de los siguientes valores:
- Traducir(): Mueve un elemento en la página
- traducir X (): Mueve el elemento horizontalmente en la página
- traducir (): Mueve el elemento verticalmente en la página
- traducir del (): Mueve el elemento a lo largo del eje Z, «hacia» o «alejándose» del usuario
- escala(): aumenta/disminuye el tamaño de un elemento
- escalaX (): aumentar/disminuir el ancho del elemento
- escalaY (): aumenta/disminuye la altura del elemento
- girar(): rota un elemento (predeterminado alrededor de su centro)
- rotarX (): Gira el elemento alrededor del eje X
- rotar (): Gira el elemento alrededor del eje Y
- torcido(): sesga la forma del elemento
- sesgar X (): inclina la forma del elemento horizontalmente
- sesgar Y (): inclina la forma del elemento verticalmente
- perspectiva(): En combinación con el valor de transformación 3D, da la apariencia de un elemento que se mueve hacia/desde el usuario
- transformar-origen: Propiedad CSS usada con transformar cambiar la fuente de transformación.
- transformación: propiedad CSS para controlar la velocidad de la animación. Se puede usar con transformar para animar elementos de página.
Al combinar estas poderosas técnicas, puede hacer mucho: experimente y vea qué se le ocurre.
Y recuerde, independientemente de los efectos geniales que obtenga, asegúrese de que en última instancia sirvan al usuario mejorando la experiencia de navegación en lugar de distraerlo.
Nota del editor: esta publicación se publicó originalmente en noviembre de 2020 y se actualizó para que esté completa.
