Elementor es un constructor de páginas muy potente que permite a los dise?adores crear páginas web bonitas y funcionales sin conocimientos de programación. Además de su intuitiva interfaz de arrastrar y soltar, Elementor ofrece varias herramientas de dise?o avanzadas, como por ejemplo Transformación CSS Controles. Con estos controles, es posibleA?ada transformaciones como rotación, desplazamiento, zoom, inclinación y volteo a los elementos de la página.creando un efecto visual distintivo.

En este post, nos adentraremos en cómo utilizar la función Transformación CSS controles para a?adir efectos especiales a sus dise?os, con instrucciones detalladas sobre cómo utilizar cada efecto y escenarios prácticos de aplicación.

?Qué es el control CSS Transform?

El control CSS Transform le permite crear un nuevo control CSS Transform utilizando la funciónGirar, ampliar, desplazar, inclinar y voltearetc.Cambio de widgets en la páginaEstos controles están disponibles en Elementor Estos controles están disponibles en "Ficha Avanzado"Bajo".una transformación" que se encuentra en la configuración, admite los estados normal y hover. Al editar el estado hover, también puedeAjuste de la duración del efectopara garantizar que el efecto sea suave y no irregular.

Descripción de los controles

Cada efecto de transformación puede ajustarse a valores diferentes para distintos puntos de rotura de pantalla. Se puede acceder a la pantalla Ajustes de respuesta haciendo clic en el icono de dispositivo de la ficha del control para obtener los mejores resultados en distintos dispositivos.

Gire

girarpermite rotar los elementos de la página alrededor de un eje específico. La rotación se consigue mediante controles deslizantes o rellenando directamente el cuadro de entrada con el valor del ángulo (en forma degraduación (alcohol, lentes, etc.)(en unidades), puedes ajustar fácilmente el efecto de rotación.

• Rotación ordinaria: Rota el elemento a lo largo del eje Z (plano 2D).

• Rotación 3D: Si se requieren efectos visuales más complejos, puede activar la rotación 3D, que permite a los X, Y y Z La rotación 3D también puede combinarse con efectos de perspectiva (en píxeles) para mejorar la tridimensionalidad.

Aplicaciones prácticas: Por ejemplo, puede a?adir un botón con un icono a la sección Efecto de rotación 3DEl botón gira ligeramente cuando el usuario pasa el ratón por encima para dar vida al dise?o.

Escala

El control de zoom le permite escalar los elementos de la página. Puede escalar proporcionalmente (Escalado simultáneo de los ejes X e Y), o puede ajustar la escala de un eje individualmente. Los elementos pueden redimensionarse mediante controles deslizantes o escribiendo un porcentaje directamente en el cuadro de entrada.

• Igualdad de escala: Por defecto, los ejes X e Y se escalan al mismo tiempo, manteniendo la escala original del elemento.
• Escala individual: Si desea escalar en una dirección, puede desbloquear la escala para ajustar los ejes X o Y individuales.

Aplicaciones prácticas: Por ejemplo, es posible hacer que determinados botones o imágenes se amplíen ligeramente cuando el usuario pasa el ratón por encima para llamar la atención sobre ellos.

Inclinación

leanEl control permite a?adir un efecto de inclinación al elemento en los ejes X e Y. El ángulo de inclinación puede ajustarse fácilmente mediante el control deslizante o introduciendo un valor porcentual en el cuadro de entrada.

• Inclinación del eje X: horizontalInclinación de la dirección.
• Inclinación del eje Y: perpendicularInclinación de la dirección.

Aplicaciones prácticas: El efecto de inclinación puede a?adir dinamismo a una imagen o a un bloque de texto, y es especialmente útil para crear dise?os modernos y únicos.

Volteo horizontal y vertical (Flip)

• Voltear horizontalmente: Coloca un elemento en el eje X delréplicaDel tirón.
• Volteo vertical: Colocar el elemento en el eje YréplicaDel tirón.

Aplicaciones prácticas: Los efectos de volteo pueden aplicarse a imágenes, iconos u otros elementos visuales para mejorar la experiencia interactiva permitiendo al usuario ver la otra cara del elemento al pasar el ratón por encima.

Punto de anclaje

El control Ancla permite establecer el punto inicial de la transformación, es decir, el punto central del elemento cuando se gira, escala o sesga. Opcional:

• Anclajes horizontales: Izquierda, centro y derecha.
• Anclajes verticales: Arriba, centro, abajo.

Ajustando el punto de anclaje, puede controlar el efecto de transformación con mayor precisión. Por ejemplo, si fija el punto de anclaje en la esquina superior izquierda de un elemento, el elemento girará alrededor de la esquina superior izquierda al girar el botónEn lugar del centro.

Aplicaciones prácticas: Por ejemplo, las posiciones de los anclajes pueden ajustarse para crear efectos visuales más complejos cuando se desean efectos asimétricos de rotación o inclinación.

Cómo establecer CSS Transform para el estado hover

En Elementor, no sólo es posible configurar unTransformaciones CSS para establecer el estado normal de un elemento de páginaTambién puede establecer diferentes efectos para el estado hover (es decir, cuando el usuario pasa el puntero del ratón por encima del elemento). Para editar la transformación del estado hover, puedes:

1. Seleccione el elemento y vaya a "Ficha Avanzado".
2. Realice ajustes en la configuración de Transformación y elija efectos como Rotar, Desplazar, Escalar, Sesgar o Voltear.

3. Ajustes"Duración del efecto" para facilitar el proceso de transformación.

Aplicaciones prácticas: En el dise?o de sitios web, los efectos hover pueden mejorar eficazmente la experiencia del usuario. Por ejemplo, se pueden activar efectos de rotación y zoom cuando el usuario pasa el ratón por encima de un botón, lo que hace que el botón parezca más interesante e interactivo.

Ejemplo práctico: cómo utilizar CSS Transform para conseguir un efecto de botón 3D.

He aquí un sencillo tutorial para crear un efecto de botón 3D utilizando el control CSS Transform:

1. A?ade widgets de botones: En el editor de páginas de Elementor, a?ade un widget de botón.
2. Introduzca los ajustes de transformación: Tras seleccionar el botón, vaya a "Ficha Avanzado">"una transformación".

3. Aplica efectos de rotación y perspectiva:
   • Active la rotación 3D en los ajustes de rotación.
   • Establezca los valores de rotación para los ejes X e Y. Se recomienda mantener el ángulo de rotación dentro de los 10 grados para garantizar la naturalidad.
   • Combínalo con un efecto de perspectiva, por ejemplo, establece el valor de perspectiva en 800px para realzar el efecto 3D.

4. Establece el efecto hover: Al pasar el ratón por encima, ajuste el ángulo de rotación a 0 grados y a?ada un efecto de zoom ajustando el valor de zoom a 1,1 para que el botón se amplíe al pasar el ratón por encima.

Con esta sencilla configuración de transformación, puede crear fácilmente un botón interactivo con efecto 3D para mejorar la experiencia visual del usuario.

resúmenes

CSS Transform es una parte importante de las potentes funciones de dise?o de Elementor, que permite a los dise?adores a?adir efectos ricos y dinámicos a las páginas con unas pocas acciones sencillas. Ya se trate de rotar, escalar, inclinar o voltear, todos los controles se pueden combinar de forma flexible para a?adir dimensión e interés a tus dise?os.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres