Transforma
¿estás cansado de que todo parezca un rectángulo perfecto? La extensión Transform te brinda el poder de girar, inclinar y remodelar cualquier widget o Elementos de Elementor. Agregue un sesgo sutil a una tarjeta testimonial, rote un titular para lograr un efecto dramático o escale una imagen al flotar con precisión, todo con controles visuales simples. Es la herramienta secreta para crear diseños vanguardistas, dinámicos y verdaderamente únicos que se destacan del aspecto de plantilla estándar. Vaya más allá del posicionamiento básico y dé a sus elementos una nueva dimensión.
Incline y gire sobre los ejes X e Y
Haga que sus elementos se inclinen, inclinen o aparezcan en perspectiva. Controle de forma independiente los valores Skew X y Skew Y para crear formas de paralelogramo o inclinaciones dinámicas. Combine esto con Girar para girar su elemento en el espacio 2D o 3D, rompiendo la rígida alineación horizontal del diseño web típico.
- Inclinación dinámica: aplique una Skew X para que un contenedor parezca inclinado hacia adelante o hacia atrás.
- Rotación precisa: gire los elementos en grados precisos para diseños creativos y diseños superpuestos.
- Combinar efectos: incline un botón y luego gírelo ligeramente para realizar una llamada a la acción divertida y fuera de lugar.
Crezca, reduzca y agregue profundidad al flotar
Crea momentos interactivos que respondan a tus visitantes. Utilice la propiedad Escala para hacer que un icono o imagen crezca al flotar, atrayendo la atención. Agregue perspectiva a un contenedor principal para hacer que los elementos secundarios giren en el espacio 3D, creando una sensación de profundidad e inmersión que los diseños planos no pueden igualar.
- Escalado basado en desplazamiento: establezca un estado de desplazamiento en Escala: 1,1 para obtener un efecto de crecimiento suave y atractivo en botones o tarjetas.
- Profundidad similar a 3D: utilice la configuración Perspectiva para hacer que múltiples elementos rotados parezcan parte de una escena 3D unificada.
- Controle el origen: cambie el origen de la transformación para hacer que un elemento escale desde su centro, parte superior o esquina.
Preguntas frecuentes sobre transformaciones
¿estrabar o rotar mi texto dificultará su lectura?
Puede, si te excedes. La clave es la sutileza. Una ligera rotación o inclinación de 2 a 5 grados puede agregar un gran interés visual sin perjudicar la legibilidad. Siempre obtenga una vista previa y pruebe en diferentes dispositivos. Para textos corporales importantes, es mejor mantener las transformaciones mínimas o aplicarlas sólo a elementos decorativos.
¿puedo usar esto para crear una tarjeta plegable 3D?
¡puedes acercarte mucho! Al combinar Rotate Y (para el cambio) con Perspective en un contenedor principal, puedes crear una tarjeta que parece girar. Usarías dos elementos (anverso y reverso) y alternarías su visibilidad con interacciones más avanzadas o código personalizado para obtener una solución completa.
¿Estos efectos funcionan en dispositivos móviles?
Las transformadas CSS utilizadas son ampliamente compatibles con los navegadores móviles modernos. Sin embargo, las perspectivas 3D complejas o las animaciones intensas pueden funcionar mejor en el escritorio. Siempre es una buena idea comprobar su diseño en un teléfono real y simplificar los efectos para dispositivos móviles si es necesario.
¿en qué se diferencia esto de la extensión Efectos flotantes?
¡gran pregunta! Efectos flotantes es para animaciones automáticas y continuas (como un movimiento de rebote o deriva). La extensión Transform trata de cambiar la forma y posición del núcleo de un elemento (deslizar, rotar, escalar), a menudo de forma estática o como una interacción única (como un efecto flotante). ¡Se pueden usar juntos! Por ejemplo, podrías tener una tarjeta ligeramente sesgada (Transformar) y también pulsos suaves (Efectos flotantes).
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
