JIT
Creating a rotating 3D cube illusion with hover effect
Log in
@jonathandeloss02
Create a rotating 3D cube illusion. Each face of the cube should be a flat div styled with perspective and transform. Animate the cube to continuously rotate around its X and Y axes. Add hover effect to pause the animation.
DeepSeek V3
Updated files
v1
@jonathandeloss02
Send me code and let me copy it
DeepSeek V3

Here's the complete code for the 3D cube illusion:

<!DOCTYPE html>
<html>
<head>
  <title>3D Cube Illusion / Anime.js</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #1a1a1a;
      perspective: 1000px;
    }

    .scene {
      width: 200px;
      height: 200px;
      position: relative;
      transform-style: preserve-3d;
    }

    .cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
    }

    .cube-face {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: white;
      opacity: 0.9;
    }

    .front  { transform: rotateY(  0deg) translateZ(100px); background: rgba(255, 0, 0, 0.7); }
    .back   { transform: rotateY(180deg) translateZ(100px); background: rgba(0, 255, 0, 0.7); }
    .right  { transform: rotateY( 90deg) translateZ(100px); background: rgba(0, 0, 255, 0.7); }
    .left   { transform: rotateY(-90deg) translateZ(100px); background: rgba(255, 255, 0, 0.7); }
    .top    { transform: rotateX( 90deg) translateZ(100px); background: rgba(255, 0, 255, 0.7); }
    .bottom { transform: rotateX(-90deg) translateZ(100px); background: rgba(0, 255, 255, 0.7); }
  </style>
</head>
<body>
  <div class="scene">
    <div class="cube">
      <div class="cube-face front">Front</div>
      <div class="cube-face back">Back</div>
      <div class="cube-face right">Right</div>
      <div class="cube-face left">Left</div>
      <div class="cube-face top">Top</div>
      <div class="cube-face bottom">Bottom</div>
    </div>
  </div>

  <script type="module">
    import { createTimeline, utils } from 'https://cdn.jsdelivr.net/npm/animejs@4.0.0/+esm';

    const cube = document.querySelector('.cube');
    let isPaused = false;

    const animation = createTimeline({
      loop: true,
      autoplay: true,
      direction: 'alternate',
      easing: 'linear'
    })
    .add(cube, {
      rotateX: [
        { value: '0deg', duration: 0 },
        { value: '360deg', duration: 8000 }
      ],
      rotateY: [
        { value: '0deg', duration: 0 },
        { value: '360deg', duration: 10000 }
      ]
    })
    .init();

    cube.addEventListener('mouseenter', () => {
      animation.pause();
      isPaused = true;
    });

    cube.addEventListener('mouseleave', () => {
      if (isPaused) {
        animation.play();
        isPaused = false;
      }
    });
  </script>
</body>
</html>

This code creates a 3D cube with six colored faces that continuously rotates around both X and Y axes. The animation pauses when you hover over the cube and resumes when you move the cursor away. The entire animation is handled by Anime.js 4.0.0 without using any low-level timing methods.