JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<a href="javascript:void(0);" onclick="alert($('#cube2').css('transform')); $('#cube').addClass('movecube1'); $('#cube2').addClass('movecube2');">RUN</a>
<span id="x">x: </span>
<span id="y">y: </span>
<span id="z">z: </span>
<section class="container">
  <div id="cube">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
    <figure class="right">3</figure>
    <figure class="left">4</figure>
    <figure class="top">5</figure>
    <figure class="bottom">6</figure>
  </div>
    
    <div id="cube2">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
    <figure class="right">3</figure>
    <figure class="left">4</figure>
    <figure class="top">5</figure>
    <figure class="bottom">6</figure>
  </div>
</section>

CSS

.container {
  width: 200px;
  height: 200px;
  position: relative;
  perspective: 1000px;
    margin-top:100px;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-1000px) translateX(500px) rotateY(   22deg );
  transition: all 6s;
}

#cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
}

#cube2 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(300px) translateX(500px) rotateY(   44deg );
    -webkit-transition: all 6s;
}

#cube2 figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
}

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

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


.movecube1 {
    transform: translateZ(400px) translateX(500px) rotateY(   88deg ) !important;
}
.movecube2 {
    transform: translateZ(-400px) translateX(100px) rotateY(   18deg ) !important;
}

JavaScript

// 3D functions -> __3d_distance, __3d_intersect


// __3d_distance
// objects have x,y,z
// calculate distance between 3D points

var object1 = { x:-100, y:-100, z:-100 };
var object2 = { x:100, y:100, z:100 };

function __3d_distance(object1,object2){
    
    var deltaX = object2.x - object1.x;
    var deltaY = object2.y - object1.y;
    var deltaZ = object2.z - object1.z;    
    
    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
    
    return distance;
    
}

// __3d_intersect ////////////////////////////
// objects have x,y,z as well as w,h,d - depth

var object1 = { x:-100, y:-100, z:-100, w:100, h:100, d:100 };
var object2 = { x:100, y:100, z:100, w:100, h:100, d:100 };

function __3d_intersect(object1,object2){
    
    var deltaX = (object2.x-(object2.w/2)) - (object1.x+(object1.w/2));
    var deltaY = (object2.y-(object2.h/2)) - (object1.y+(object1.h/2));
    var deltaZ = (object2.z-(object2.d/2)) - (object1.z+(object1.d/2));    
    
    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY + deltaZ * deltaZ);
    
    var max_distance = Math.max(object1.w,object1.h,object1.d,object2.w,object2.h,object2.d);
    
    if(distance < max_distance){
        
        // is intersecting
        return true;
        
    } else {
        
        return false;
        
    }
    
}

var el = document.getElementById('cube');
var matrix = new WebKitCSSMatrix(el.style.webkitTransform);



// custom event listeners for our objects

var collision = new Event('collision');

var elem = document.getElementById('cube');
// Listen for the event.
elem.addEventListener('collision', function (e) {

   alert("COLLIDED");
    
}, false);

    // check for intersection
    
    var __object1 = { x:-100, y:-100, z:-100, w:240, h:140, d:140 }
    var __object2 = { x:100, y:100, z:100, w:240, h:140, d:140 }
    
    if(__3d_intersect(__object1,__object2)){
        
        // Dispatch the event.
        elem.dispatchEvent(collision); 
  ...