Esta poderosa funci\u00f3n te permite mover, redimensionar, rotar e incluso sesgar elementos en tu p\u00e1gina. Es como agregar un poco de magia, haciendo que tus dise\u00f1os se sientan interactivos y din\u00e1micos.<\/p>\n\n\n\n
Piensa en sitios web donde has visto im\u00e1genes que se inclinan cuando pasas el cursor sobre ellas, un efecto de zoom para ver algo m\u00e1s de cerca, o un \u00edcono en un bot\u00f3n que se mueve cuando pasas el cursor sobre \u00e9l.<\/p>\n\n\n\n
Eso es el CSS transform trabajando detr\u00e1s de escena.<\/p>\n\n\n\n
Es una propiedad simple que puede cambiar completamente c\u00f3mo los usuarios interact\u00faan con tu sitio web. En esta gu\u00eda, aprenderemos c\u00f3mo crear efectos visuales interactivos que har\u00e1n que tu sitio web se destaque entre la multitud.<\/p>\n\n\n\n
\u00a1Comencemos!<\/p>\n\n\n\n
Entendiendo Los Fundamentos de CSS<\/strong> Transform<\/strong><\/h2>\n\n\n\nAntes de sumergirte en la transformaci\u00f3n CSS, necesitas tener una base s\u00f3lida de CSS. Si a\u00fan no conoces CSS, echa un vistazo a nuestra publicaci\u00f3n en el blog sobre aprender CSS<\/a>.<\/p>\n\n\n\nAhora, pasemos directamente a las transformaciones CSS. Las transformaciones CSS te permiten manipular visualmente un elemento.<\/p>\n\n\n\n
Piensa en rotarlo, escalarlo, sesgarlo o moverlo. Estos cambios ocurren en un espacio 2D o 3D d\u00e1ndote mucha libertad creativa.<\/p>\n\n\n\n
As\u00ed es como se ve agregar una simple transformaci\u00f3n CSS a un elemento:<\/p>\n\n\n\n![\"\"](\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\")
<\/figure>\n\n\n\nAqu\u00ed: <\/p>\n\n\n\n
\n- .elemento<\/strong> es el selector para el elemento que est\u00e1s transformando.<\/li>\n\n\n\n
- funci\u00f3n(valor)<\/strong> te indica la transformaci\u00f3n espec\u00edfica y cu\u00e1nto de ella deseas.<\/li>\n\n\n<\/ul>\n\n\n\n
La propiedad transform admite m\u00faltiples funciones, que pueden combinarse para crear transformaciones 2D y 3D complejas.<\/p>\n\n\n\n
\u00a1Vamos a explorar algunas de ellas, \u00bfde acuerdo?<\/p>\n\n\n\n
Explorando CSS Transform en 2D<\/strong><\/h2>\n\n\n\nLas transformaciones CSS son realmente geniales: te permiten manipular c\u00f3mo se muestran los elementos en una p\u00e1gina web. Pi\u00e9nsalo como mover cosas en la vida real, pero con c\u00f3digo. Aqu\u00ed, veremos algunas de las transformaciones bidimensionales disponibles en CSS.<\/p>\n\n\n\n
Rotando Elementos<\/strong><\/h3>\n\n\n\nUna de las cosas m\u00e1s comunes que puedes hacer con las transformaciones CSS es rotar cosas. Supongamos que tienes un bot\u00f3n que dice Haz Clic<\/strong>, o cualquier bot\u00f3n en tu sitio web. Podemos usar la funci\u00f3n rotate<\/strong> en CSS para hacerlo un poco m\u00e1s interesante.<\/p>\n\n\n\n
Ahora, pasemos directamente a las transformaciones CSS. Las transformaciones CSS te permiten manipular visualmente un elemento.<\/p>\n\n\n\n
Piensa en rotarlo, escalarlo, sesgarlo o moverlo. Estos cambios ocurren en un espacio 2D o 3D d\u00e1ndote mucha libertad creativa.<\/p>\n\n\n\n
As\u00ed es como se ve agregar una simple transformaci\u00f3n CSS a un elemento:<\/p>\n\n\n\n Aqu\u00ed: <\/p>\n\n\n\n La propiedad transform admite m\u00faltiples funciones, que pueden combinarse para crear transformaciones 2D y 3D complejas.<\/p>\n\n\n\n \u00a1Vamos a explorar algunas de ellas, \u00bfde acuerdo?<\/p>\n\n\n\n Las transformaciones CSS son realmente geniales: te permiten manipular c\u00f3mo se muestran los elementos en una p\u00e1gina web. Pi\u00e9nsalo como mover cosas en la vida real, pero con c\u00f3digo. Aqu\u00ed, veremos algunas de las transformaciones bidimensionales disponibles en CSS.<\/p>\n\n\n\n Una de las cosas m\u00e1s comunes que puedes hacer con las transformaciones CSS es rotar cosas. Supongamos que tienes un bot\u00f3n que dice Haz Clic<\/strong>, o cualquier bot\u00f3n en tu sitio web. Podemos usar la funci\u00f3n rotate<\/strong> en CSS para hacerlo un poco m\u00e1s interesante.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00-CSS-transform-simple-1024x433.jpg\"){kind=spacer}
<\/figure>\n\n\n\n\n
Explorando CSS Transform en 2D<\/strong><\/h2>\n\n\n\n
Rotando Elementos<\/strong><\/h3>\n\n\n\n
![\"C\u00f3digo](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01-elementos-rotativos-1-1024x831.jpg\" "\\"CSS")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02-Elementos-Escalado-1-1024x831.jpg\")
<\/figure>\n\n\n\n