elsaltoweb.es

Haz rotar cualquier imagen en Elementor
sin plugins adicionales

Con este sencillo código lograrás hacer rotar cualquier imagen en tu web creada con Elementor.
Rápido, ligero y sin instalar plugins extra.

1

Agrega una imagen en Elementor

Inicia sesión en tu WordPress y abre la página que deseas editar con Elementor.
Añade un widget de Imagen en la posición donde quieras el efecto de rotación.

2

Crea una clase personalizada

Haz clic derecho en el widget de imagen y selecciona Editar.
Ve a la pestaña Opciones avanzadas y en el campo Clase CSS escribe: rotacion-infinita.

3

Añade el código CSS

Ve al personalizador de tu tema o al editor de CSS personalizado.
Copia y pega este código CSS:

.rotacion-infinita {
  animation: girar-360 3.5s linear infinite;
  display: inline-block;
  transition: filter 0.2s;
}
@keyframes girar-360 {
  to { transform: rotate(360deg); }
}
.rotacion-infinita:hover {
  filter: brightness(1.15) drop-shadow(0 0 16px #10a37f);
  animation-play-state: paused;
}
4

Guarda y publica

Guarda los cambios en Elementor y publica la página.
¡Listo! Tu imagen ahora rotará de manera continua.

Puedes ajustar la velocidad cambiando 3.5s por el tiempo que prefieras.
El efecto funciona en cualquier imagen a la que apliques la clase rotacion-infinita.
© 2025 elsaltoweb.es – Tutoriales rápidos de diseño y desarrollo web para creadores en español.

Más recursos

Agentes de IA con LangChain

Agentes de IA con LangChain: arquitectura, seguridad y resultados

Efecto de estrellas detrás de tu ratón

¿Te fascina el cielo estrellado? 🌌🌠 Explora este proyecto "Star Trails with Options" y personaliza la magia del firmamento. 💫🔧
Slider CSS Moderno UI/UX Impactante para Landing Pages

Slider responsivo solo HTML y CSS

Slider totalmente personalizado que hemos creado utilizando solo HTML y CSS.

NBA LEGENDS

Leyendas de la NBA: Quiénes son los GOATs de la Historia

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

¿Tu sitio está optimizado? Descúbrelo en segundos con nuestra herramienta de IA y recibe un informe de UX
Efecto de rastro de imágenes en tu sitio web con HTML, CSS y JavaScript

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

En este tutorial, te guiaré a través del código HTML y JavaScript para implementar este efecto sorprendente en tu propio