Cómo aplicar un efecto de rotación continua a una imagen en Elementor

Con este sencillo código lograrás hacer rotar cualquier imagen de elementor sin necesidad de plugins adicionales

Paso 1: Agregar una imagen en Elementor

Inicia sesión en tu sitio de WordPress y abre la página en la que deseas aplicar el efecto de rotación continua a una imagen utilizando Elementor.
Añade un widget de imagen en la ubicación deseada de tu diseño.

Paso 2: Crear una clase personalizada

Haz clic derecho en el widget de imagen y selecciona «Editar».
Ve a la sección «Opciones avanzadas» del widget de imagen.
En el campo de «Clase CSS», añade una clase personalizada. Por ejemplo, puedes usar «rotacion-infinita».

Paso 3: Añadir el código CSS

1. Ve a la sección de personalización de tu tema de WordPress o al editor de CSS personalizado.
2. Copia y pega el siguiente código CSS:

				
					cssCopy code
.rotacion-infinita {
animation: rotar 3s infinite linear; /* ajusta la duración y el tipo de animación según sea necesario */
}@keyframes rotar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Paso 4: Guardar y publicar la página

Guarda los cambios en Elementor.
Publica la página en tu sitio de WordPress.

Ahora, la imagen dentro del widget de Elementor que tiene la clase «rotacion-infinita» se rotará continuamente en sentido horario. Puedes ajustar la duración y el tipo de animación modificando los valores en la regla animation.

Más recursos

COMPARTIR EN:

228

Módulo 1: Fundamentos Avanzados de UI

Comprender y aplicar principios de diseño

COMPARTIR EN:

203

Image Accordion Slider with CSS and JS

🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥

COMPARTIR EN:

347

¿Qué es View Transitions?

View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.

COMPARTIR EN:

165

Creando partículas controladas por audio en Three.js

👉 Con tecnología de Three.js y Web Audio API, ahora el sonido no solo se escucha, ¡se ve en tiempo real! 💻🎶

COMPARTIR EN:

186

Looping words with GSAP

CodePen Looping words with GSAP

COMPARTIR EN:

352

WordPress con React y Gutenberg

Crear una landing page con React y Gutenberg en WordPress es una combinación poderosa para lograr una experiencia de usuario moderna y un control total sobre el desarrollo.