JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="view3d"></div>

CSS

html,body{
  height:100%;
  margin:0px;
  background-color:#000;
}
.view3d{
  position:relative;
  width:100%;
  height:100%;
  overflow:auto;
}
.view3d .view {
  width: calc(100%/3);
  height: calc(100%/3);
  outline: solid 1px #fff;
  background-color:#333;
  z-index:10;
  position:absolute;
}
.view3d .view3d-main {
  width: 100%;
  height: 100%;
  outline: none;
  background-color:#000;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  z-index:1;
  perspective: 500px;
}
.view3d .view3d-top {
  top:0%;
}
.view3d .view3d-left {
  top:33.33%;
}
.view3d .view3d-front {
  top:66.66%;
}






.pen-line{
  background-color:#ff0000;
  min-width:10px;
  min-height:10px;
  position:absolute;
  top:50%;
  left:50%;
}

JavaScript

var view3d = {
	
  draw_element: null,
  
  container: $('.view3d'),
  
  view_objects: Array(),
  
	views: Array(
    {
    	name: "main",
      classname: "view3d-main"
    },
  	{
    	name: "top",
      classname: "view3d-top"
    },
    {
    	name: "left",
      classname: "view3d-left"
    },
    {
    	name: "front",
      classname: "view3d-front"
    }
  ),
  
  init: function(){
  
  	view3d.container = $('.view3d');
  	
    view3d.container.html(''); // clear html
    
    view3d.views.forEach(function(view){
    
    	var view_element = $('<div class="view ' + view.classname + '"></div>');
    	
      view3d.view_objects.push(view_element);
      
      view3d.container.append(view_element);
      
      view_element.click(function(e){
      
      	var offs = $(this).offset()
      	view3d.attach($(this),(e.clientX - offs.left)-($(this).width()/2),(e.clientY - offs.top)-($(this).height()/2));
      
      });
      
    });
    
  },
  
  render: function(){
  
  	
    
  },
  
  attach: function(view,x,y){
  
  console.log(x);
  console.log(y);
  
  	
    view3d.draw_element = $('<div class="pen-line"></div>');
    
    if(view.hasClass('view3d-front')){
    
    	var n_x = x;
      var n_y = y;
      
      var transform = 'translateX(' + n_x + 'px) translateY(' + n_y + 'px)';
      
    } else if(view.hasClass('view3d-left')){
    
    	var n_z = x;
      var n_y = y;
      
      var transform = 'translateZ(' + n_z + 'px) translateY(' + n_y + 'px)';
      
    } else if(view.hasClass('view3d-top')){
    
    	var n_x = x;
      var n_z = y;
      
      var transform = 'translateX(' + n_x + 'px) translateZ(' + n_z + 'px)';
      
    }
    
    view3d.draw_element.css('transform',transform);
    
    view.append(view3d.draw_element);
    
  }

}

view3d.init();