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
-
- Ve a la sección de personalización de tu tema de WordPress o al editor de CSS personalizado.
- 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:
Facebook
LinkedIn
WhatsApp
Customiza tus widgets de Elementor de manera fácil
📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
ThreeJS + Vanta.Fog: Animated Background
Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Tensorflow videotracking V2
🧠TensorFlow.js, es como un cerebro de computadora que detecta objetos a tu alrededor 🕵️♂️.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Animación de Desplazamiento con Efecto de Pantalla Dividida para Portafolio
Encontrarás el código HTML completo para que puedas integrarlo fácilmente utilizando un widget de HTML en WordPress y Elementor.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Inspírate con Efectos Modernos y Recursos Gratuitos
Encuentra inspiración con efectos modernos para UI/UX y accede a recursos gratuitos para mejorar tus proyectos web.