WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animado
973
ledoc
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
8 November 2023
Menú Animado
1 June 2025
Diagrama de Venn animado
9 September 2024
Botón de borrar animado
HTML
Copy
animated element using css
CSS
Copy
body { margin: 0; overflow: hidden; background: #eef2f5; } .container { display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; } .box { width: 250px; height: 250px; background-image: url(img/1.jpg); background-size: cover; background-position: center center; border-radius: 50%; position: relative; animation: moveRotate 5s ease-in-out infinite, imgChange 3s alternate infinite; transform-style: preserve-3d; border: 20px ridge #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } @keyframes moveRotate { 0%, 100% { transform: translateX(0) rotateY(0deg) rotateX(0deg); } 25% { transform: translateX(200px) rotateY(90deg) rotateX(90deg); } 50% { transform: translateX(0) rotateY(180deg) rotateX(180deg); } 75% { transform: translateX(-200px) rotateY(270deg) rotateX(270deg); } } @keyframes imgChange { 0%, 100% { background-image: url(img/1.jpg); } 50% { background-image: url(img/2.jpg); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */