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.
El efecto funciona en cualquier imagen a la que apliques la clase
rotacion-infinita.
Más recursos
Text Marquee effect
Cómo aplicar un efecto de rotación continua a una imagen en Elementor
Configuración Inicial de WordPress
Efecto CSS Videocasete Retro | Demo Visual VHS Scotch para tu Web
Curso CSS de Jonathan Mircha | Domina los estilos desde cero
