3डी फ्लाई बॉक्स एनीमेशन

864 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

23 November 2025

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

14 October 2025

CSS लोडिंग एनीमेशन स्निपेट

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>

3डी फ्लाई बॉक्स एनीमेशन

अनुशंसित

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

HTML एनीमेशन कंटेनर उदाहरण

CSS लोडिंग एनीमेशन स्निपेट

HTML

CSS

JS

अनुशंसित

Paystack का उपयोग करके क्रेडिट कार्ड एनीमेशन

HTML एनीमेशन कंटेनर उदाहरण

CSS लोडिंग एनीमेशन स्निपेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS