Animación de caja de moscas en 3D

954 kevekıbhack

Abrir en el editor Video Publica tu código

Recomendado

10 August 2025

Pestañas HTML con botón de cierre

28 October 2025

Ejemplo de efectos al pasar el cursor sobre un botón HTML

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

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>

Animación de caja de moscas en 3D

Recomendado

Pestañas HTML con botón de cierre

Ejemplo de efectos al pasar el cursor sobre un botón HTML

Plantilla HTML para reproductor de juegos Flash Ruffle

HTML

CSS

JS

Recomendado

Pestañas HTML con botón de cierre

Ejemplo de efectos al pasar el cursor sobre un botón HTML

Plantilla HTML para reproductor de juegos Flash Ruffle

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS