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.

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.

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.

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;
}

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.