3D Cube Animation using Pure CSS Code in Hinglish

Apko hum! Yaha CSS ka use kar ke 3D Cube Animation create kaise karte he ye bataenge.
3D Cube Animation using Pure CSS Code

3D Cube Animation using Pure CSS Code in Hinglish

1. HTML Structure:

HTML code me, hum class naam “cube” ke sat ek div element bana kar shuruyat karte hai. Cube ke andar hum 2 div class aur 4 span element banate hai, jo cube k face ko representing karte hai. Ap, apki ichchha-anusar har ek content me face ya text jod sakte hai.

2. CSS Styling:

CSS code me, hum .cube class ko style kar ke suru karte hai. Hume cube container ki width aur height 300 pixels set ki hai. Hum body k liye position: relative use karte hai, transform-style: preserve-3d ye ensure karta hai ki 3d transformation element me applied he, hum transform ka use kar ke rotation bhi set kar sakte hai transform: rotateX(-30deg).

3. .cube div span Style:

Hum cube div span ka use kar ke sabhi span k liye common style ko define karte hai. Har ek span ki width aur height 100 percent, background color (ap k hisab se) aur top aur left 0 pixels rakte hai.

4. Top Style:

Hum .top ka use kar ke, position: absolute, width aur height 300 pixels, background color (apki hisab se), aur top 0 or left 0 rakte hai.

5. Individual Transformations:

3d effect banane k liye, hum .top:: before animation ka define karte he, jisme content:”null”, position: absolute, top 0 pixel aur left 0 pixel, width and height 300 pixels hota he, background color apke hisab se, transforms: translateZ(-380px), filter ka use image shadow ko blur karne k use me aata hai filter: blur(20px), box- shadow image ki shadow ka color deside karne k kaam aata hai.

6. Cube Animation

Cude ko rotate karne k liye, hum ek @keyframes animation ko define karte hai, jisko rotateCude kaha gaya hai, fir ye cube 0 percent par transform: rotate X-axis par -30deg aur rotate Y-axis par 0deg k sat suru hota hai, or 100 percent par transform: rotate X-axis par -30deg aur rotate Y-axis par 360deg k sat khatam hota hai. Hum animation ka use kar k is animation ko .cube class me use karte hai jisme hum rotate time 5 second aur infinite loop linear function ka use karte hai.

Full Code: Is code ko VScode Software par use kare aur mobile par agar is code ko copy/paste kar rahe he to apne Chrome browser ki settings me jake desktop version kar k fir is code ko copy kare.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cube</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #050505;
    }
    .cube{
      position: relative;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      transform: rotateX(-30deg);
      animation: rotateCude 5s linear infinite;
    }
    @keyframes rotateCude{
      0%{
        transform: rotateX(-30deg) rotateY(0deg);
      }
      100%{
        transform: rotateX(-30deg) rotateY(360deg);
      }

    }
    .cube div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }
    .cube div span{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(#da0707,
      #e3a0f3);
      transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
    }
    .top{
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background: #e80707;
      transform: rotateX(90deg) translateZ(150px);
    }
    .top::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 300px;
      background: rgb(246, 128, 246);
      transform: translateZ(-380px);
      filter: blur(20px);
      box-shadow: 0 0 120px rgba(0,255,0,0.2),
      0 0 200px rgba(240, 80, 243, 0.4),
      0 0 300px rgba(226, 99, 192, 0.6),
      0 0 400px rgba(236, 89, 231, 0.8),
      0 0 500px rgb(227, 66, 216);
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="top"></div>
    <div>
      <span style="--i:0;"></span>
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
    </div>
  </div>
</body>
</html>
Go Live Input:
3D Cube Animation using Pure CSS Code
Video Link:- Click me
Agar apko is article ko pad kar aur 3d Cube Animation using Pure CSS Code use kar ke accha laga ho to pleace mere is article ko share kare.
Humari Website dekhne k liye Dhanyawad.

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.