Rotating Cube

<div class="fx-0001-root">
  <div class="demo-3d">
    <div class="cube-container" tabindex="0" role="group" aria-label="3D cube: point at it, or use the arrow keys">
      <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>
  </div>
</div>

.fx-0001-root,
.fx-0001-root *,
.fx-0001-root *::before,
.fx-0001-root *::after {
  box-sizing: border-box
}

.fx-0001-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.demo-3d {
  width: 280px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cube-container {
  width: 100px;
  height: 100px;
  perspective: 600px;
  /* Le doigt oriente le cube au lieu de faire défiler la page (zone de 100 px). */
  touch-action: none;
  outline: none;
}

.cube-container:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 22px;
  border-radius: 6px;
}

.cube-container:focus-visible .cube-face {
  border-color: rgba(255, 255, 255, 0.9);
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
  transition: transform 0.1s ease-out;
}

.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backface-visibility: visible;
}

.cube-face.front {
  background: rgba(99, 102, 241, 0.8);
  transform: translateZ(50px);
}

.cube-face.back {
  background: rgba(139, 92, 246, 0.8);
  transform: rotateY(180deg) translateZ(50px);
}

.cube-face.right {
  background: rgba(217, 70, 239, 0.8);
  transform: rotateY(90deg) translateZ(50px);
}

.cube-face.left {
  background: rgba(6, 182, 212, 0.8);
  transform: rotateY(-90deg) translateZ(50px);
}

.cube-face.top {
  background: rgba(16, 185, 129, 0.8);
  transform: rotateX(90deg) translateZ(50px);
}

.cube-face.bottom {
  background: rgba(244, 63, 94, 0.8);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Mouvement réduit : le cube ne suit plus le pointeur et reste de trois quarts ;
   les flèches du clavier le tournent encore, par crans de 15°, sans transition. */
@media (prefers-reduced-motion: reduce) {
  .fx-0001-root .cube { transition: none }
}

(function() {
  // Rotating Cube : le cube se tourne vers le pointeur (souris ou doigt) et revient de trois quarts à la sortie.
  // Au clavier (Tab), les flèches le tournent par crans de 15° ; Échap le remet de trois quarts.
  // Un cube par .fx-0001-root : plusieurs copies peuvent vivre sur la même page.
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
  var REST_X = -20, REST_Y = -30;

  document.querySelectorAll('.fx-0001-root').forEach(function(root) {
    var cube = root.querySelector('.cube');
    var zone = root.querySelector('.cube-container');
    if (!cube || !zone) return;
    var keyX = REST_X, keyY = REST_Y;

    function turn(x, y) {
      cube.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
    }

    function rest() {
      keyX = REST_X;
      keyY = REST_Y;
      turn(REST_X, REST_Y);
    }

    function follow(e) {
      if (reduce.matches) return; // mouvement réduit : pas d'inclinaison qui suit le pointeur
      var rect = zone.getBoundingClientRect();
      var x = e.clientX - rect.left - rect.width / 2;
      var y = e.clientY - rect.top - rect.height / 2;
      turn(-y / 5, x / 5);
    }

    zone.addEventListener('pointermove', follow);
    zone.addEventListener('pointerdown', follow);
    zone.addEventListener('pointerleave', rest);

    zone.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') { rest(); return; }
      var step = { ArrowUp: [15, 0], ArrowDown: [-15, 0], ArrowLeft: [0, -15], ArrowRight: [0, 15] }[e.key];
      if (!step) return;
      e.preventDefault(); // les flèches tournent le cube, elles ne font pas défiler la page
      keyX += step[0];
      keyY += step[1];
      turn(keyX, keyY);
    });
    zone.addEventListener('blur', rest);
  });
})();