Animación de caja de moscas en 3D

1,227 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

12 January 2025

Un código de Mikeykun

15 May 2025

Un código de Mete

21 July 2023

Formulario con fondo de vídeo

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>3B Uçan Kutu</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(to top, #dbeafe, #f0f8ff);
      font-family: sans-serif;
    }

.game-area {
      width: 100%;
      height: 100%;
      perspective: 1000px;
      position: relative;
      overflow: hidden;
    }

.flying-box {
      width: 50px;
      height: 50px;
      background: linear-gradient(45deg, #ff6347, #ff4500);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      animation: fly3D 4s linear forwards;
    }

@keyframes fly3D {
      0% {
        transform: translate3d(-50%, 0, 0) rotateX(0deg);
        opacity: 1;
      }
      70% {
        transform: translate3d(-50%, -60vh, -300px) rotateX(180deg);
        opacity: 1;
      }
      100% {
        transform: translate3d(-50%, -120vh, -600px) rotateX(360deg);
        opacity: 0;
      }
    }
  </style>
</head>
<body>

function createFlyingBox() {
    const box = document.createElement('div');
    box.classList.add('flying-box');

// Rastgele yatay konum (kutu merkezden farklı yerden başlasın)
    const left = Math.random() * (window.innerWidth - 100);
    box.style.left = `${left}px`;

gameArea.appendChild(box);

// 4 saniye sonra DOM'dan kaldır
    setTimeout(() => {
      box.remove();
    }, 4000);
  }

// Sürekli kutu oluştur
  setInterval(() => {
    createFlyingBox();
  }, 1200); // Her 1.2 saniyede bir

// Başlangıçta birkaç kutu
  for (let i = 0; i < 3; i++) {
    setTimeout(createFlyingBox, i * 800);
  }
</script>

</body>
</html>

CSS