"Unveiling the Magic: Creating Stunning 3D Cube Animation with a Play Button Using HTML, CSS, and JavaScript"

Rotating 3D Cube Animation
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating 3D Cube Animation</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

    .cube {
      width: 100px;
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotate 5s linear infinite;
    }

    .side {
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .front { transform: translateZ(50px); background: linear-gradient(135deg, #ff8a00, #e52e71); }
    .back { transform: rotateY(180deg) translateZ(50px); background: linear-gradient(45deg, #4CAF50, #008CBA); }
    .top { transform: rotateX(-90deg) translateZ(50px); background: linear-gradient(135deg, #FFD700, #FF8C00); }
    .bottom { transform: rotateX(90deg) translateZ(50px); background: linear-gradient(135deg, #9933ff, #99ff99); }
    .left { transform: rotateY(-90deg) translateZ(50px); background: linear-gradient(135deg, #33ccff, #ff6666); }
    .right { transform: rotateY(90deg) translateZ(50px); background: linear-gradient(135deg, #ffff00, #ff6600); }

    .play-button {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: white;
      border-radius: 50%;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 25%;
      left: 25%;
    }

    .play-button::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 25px solid black;
      position: relative;
    }

    @keyframes rotate {
      0% { transform: rotateY(0); }
      100% { transform: rotateY(360deg); }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="cube">
      <div class="side back"></div>
      <div class="side top"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="side right">
        <div class="play-button"></div>
      </div>
    </div>
  </div>

  <script>
    // No JavaScript needed for this animation
  </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Cute Lamp Login Page

Looking for a fun, interactive way to spice up a dark-themed UI? Today, we are building a "Cute Lamp" login page . This single-file solution features a fully scalable SVG cartoon lamp with changing expressions, smooth color-shifting neon glows, and a pull-string interaction cycle that toggles the light and the UI theme! Below is the complete HTML, CSS, and JavaScript code. Just copy it and save it as an .html file. index.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cute Lamp Interactive Login</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --bg-color: #0b0f14; --font-family: 'Poppins', sans-serif; ...
Read more

All videos downloader

All-in-One Video Downloader All-in-One Video Downloader ☰ Home Facebook Instagram YouTube Blog Welcome to the Best Video Downloader Platform Download videos from Facebook, Instagram, and YouTube effortlessly with our advanced tools. Facebook Reels Downloader Instagram Reels Downloader YouTube Video Downloader Why Use an Online Video Downloader? In today's digital world, video content is more popular than ever. Whether it's social media platforms like Facebook, Instagram, or video-sharing sites like YouTube, people love to watch and share videos. However, many platforms do not allow users to download videos d...
Read more

Header Animation | Bold Text & 3D Effect | CSS Tutorial|Cursor animation effect using html css js

Code  <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Header Animation</title>   <style>     header nav ul {       list-style: none;       padding: 0;       margin: 0;     }     header nav ul li {       display: inline-block;       margin-right: 20px;     }     header nav ul li a {       text-decoration: none;       color: #333; /* default color */       position: relative;       transition: color 0.3s ease, transform 0.3s ease;       font-weight: bold; /* make text bold */     }     header nav ul li a:hover {       color: red; /* hover color */       transform: translateZ...
Read more