3d Box

Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

This tailwind example is contributed by ORGIN_DREAMS, on 16-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Product Showcase, Product card

Banner Hero Profile Other Product

Author ORGIN_DREAMS

1.8k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D Hover Cube</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .scene {
      perspective: 1000px;
    }

.cube {
      width: 120px;
      height: 120px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotateCube 8s infinite linear;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.scene:hover .cube {
      animation-play-state: paused;
      transform: scale(1.1) rotateX(0deg) rotateY(0deg);
      box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.2);
    }

.face {
      position: absolute;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      border: 2px solid black;
      font-weight: bold;
      font-family: sans-serif;
    }

.front  { transform: rotateY(0deg) translateZ(60px); }
    .back   { transform: rotateY(180deg) translateZ(60px); }
    .right  { transform: rotateY(90deg) translateZ(60px); }
    .left   { transform: rotateY(-90deg) translateZ(60px); }
    .top    { transform: rotateX(90deg) translateZ(60px); }
    .bottom { transform: rotateX(-90deg) translateZ(60px); }

@keyframes rotateCube {
      0%   { transform: rotateX(0deg) rotateY(0deg); }
      25%  { transform: rotateX(90deg) rotateY(180deg); }
      50%  { transform: rotateX(180deg) rotateY(180deg); }
      75%  { transform: rotateX(270deg) rotateY(360deg); }
      100% { transform: rotateX(360deg) rotateY(720deg); }
    }
  </style>
</head>
<body class="bg-black flex items-center justify-center min-h-screen">

<div class="scene w-[120px] h-[120px] cursor-pointer">
    <div class="cube">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face right">Right</div>
      <div class="face left">Left</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </div>

</body>
</html>

Related Examples

Product Page
Showcase for the product.

Author:
Prem..

4 years ago

34.6k
Show user details

Author:
Lucas Martinez

3 years ago

26.2k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

2 years ago

11.8k
Background image section

Author:
Marc

2 years ago

7.3k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

2 years ago

16k
Updated customer details page
Customer details page

Author:
Olivia Smith

2 years ago

4.3k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

2 years ago

5.9k
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

2 years ago

5.2k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

2 years ago

3.4k
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

2 years ago

3.3k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

2 years ago

6.2k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

2 years ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components