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

309

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