JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<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>
</section>

CSS

#canvas {
    width:1000px;
    height:1000px;
    background-color:#000000;
    position:relative;
}
.point {
    position:absolute;
    width:5px;
    height:5px;
}
.point:after {
    content: attr(data-coords);
    position:absolute;
    color:#ffffff;
    font-size:10px;
    font-family:arial;
    display:block;
    width:50px;
    height:auto;
    padding:4px;
    background-color:#333333;
    text-align:center;
    margin-top:10px;
    margin-left:-56px;
}
.point_a {
    background-color:#ffffff;
}
.point_b {
    background-color:#ff0000;
}
.point_c {
    background-color:#ff0000;
}

JavaScript

function get3d(selector){
   
    $(selector).css('transform');

}

get3d(selector);