JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="cube-container">
  <div class="cube">
    <div class="cube-face cube-face-front">Front</div>
    <div class="cube-face cube-face-back">Back</div>
    <div class="cube-face cube-face-top">Top</div>
    <div class="cube-face cube-face-bottom">Bottom</div>
    <div class="cube-face cube-face-right">Right</div>
    <div class="cube-face cube-face-left">Left</div>
  </div>
</div>

SCSS

HTML, BODY {
  height: 100%;
  min-height: 100%
}

/* Container for the 3D cube */
.cube-container {
  perspective: 800px;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 3D cube */
.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

/* Cube face */
.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: white;
  opacity: 0.9;
  
  &:hover {
    cursor: grab;
  }
}

/* Front face */
.cube-face-front {
  transform: translateZ(50px);
  background-color: red;
}

/* Back face */
.cube-face-back {
  transform: rotateY(180deg) translateZ(50px);
  background-color: green;
}

/* Top face */
.cube-face-top {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: blue;
}

/* Bottom face */
.cube-face-bottom {
  transform: rotateX(90deg) translateZ(50px);
  background-color: yellow;
}

/* Right face */
.cube-face-right {
  transform: rotateY(90deg) translateZ(50px);
  background-color: cyan;
}

/* Left face */
.cube-face-left {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: magenta;
}

JavaScript

let mousedown = false;

let mousedown_x = 0;
let mousedown_y = 0;

let mousemove_x = 0;
let mousemove_y = 0;

let relative_x = 0;
let relative_y = 0;

let rotate_x = 0;
let rotate_y = 0;

let currentRotationMatrix = '1,0,0,0,1,0,0,0,1';


/* let axis_x = 0;
let axis_y = 0;
let axis_z = 0;

let angle = 0; */

function inv(number) {
  return number * -1;
}

function multiplyMatrices(a, b) {
  const result = new Array(9).fill(0);
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      for (let k = 0; k < 3; k++) {
        result[i * 3 + j] += a[i * 3 + k] * b[k * 3 + j];
      }
    }
  }
  return result;
}


$('.cube').on('mousedown', function(e) {

  mousedown = true;

  mousedown_x = e.pageX;
  mousedown_y = e.pageY;

  console.log(mousedown_x, mousedown_y);

});

$(document).on('mousemove', function(e) {

  if (mousedown) {
    mousemove_x = e.pageX;
    mousemove_y = e.pageY;

    relative_x = mousemove_x - mousedown_x;
    relative_y = mousemove_y - mousedown_y;

    const axis_x = -relative_y;
    const axis_y = relative_x;
    const axis_z = 0;
    const angle = Math.sqrt(Math.pow(axis_x, 2) + Math.pow(axis_y, 2)) / 10 * 5;

    // Calculate the rotation matrix for the new rotation
    const cosAngle = Math.cos(angle * Math.PI / 180);
    const sinAngle = Math.sin(angle * Math.PI / 180);
    const rotationMatrix = [
      cosAngle + (1 - cosAngle) * axis_x * axis_x,
      (1 - cosAngle) * axis_x * axis_y - axis_z * sinAngle,
      (1 - cosAngle) * axis_x * axis_z + axis_y * sinAngle,
      (1 - cosAngle) * axis_y * axis_x + axis_z * sinAngle,
      cosAngle + (1 - cosAngle) * axis_y * axis_y,
      (1 - cosAngle) * axis_y * axis_z - axis_x * sinAngle,
      (1 - cosAngle) * axis_z * axis_x - axis_y * sinAngle,
      (1 - cosAngle) * axis_z * axis_y + axis_x * sinAngle,
      cosAngle + (1 - cosAngle) * axis_z * axis_z
    ];

    // Update the current rotation matrix
    currentRotationMatrix = multiplyMatrices(
     ...