JSFiddle - React, Tailwind, and code Playground

by atulpr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<!-- CONTROLS -->

<body>
  <input type="radio" checked id="radio-front" name="select-face" /> Front
  <input type="radio" id="radio-left" name="select-face" /> Left
  <input type="radio" id="radio-right" name="select-face" /> Right
  <input type="radio" id="radio-top" name="select-face" /> Top
  <input type="radio" id="radio-bottom" name="select-face" /> Bottom
  <input type="radio" id="radio-back" name="select-face" /> Back
  <br/>
  <br/> 
  Height
  <input type="number" id="boxHeight" value="25" /> 
  Width
  <input type="number" id="boxWidth" value="34" /> 
  <br/>
  Depth(z-axis)
  <input type="number" id="boxzPosition" value="250" />
  <div class="separator"></div>

  <div class="space3d">
    <div class="_3dbox">
      <div class="_3dface _3dface--front"></div>
      <div class="_3dface _3dface--top"></div>
      <div class="_3dface _3dface--bottom"></div>
      <div class="_3dface _3dface--left"></div>
      <div class="_3dface _3dface--right"></div>
      <div class="_3dface _3dface--back"></div>
    </div>
  </div>
</body>

CSS

body {
  color: #333;
  padding: 20px;
  text-align: center;
  font-family: Arial;
}

.separator {
  margin-top: 140px;
}


/* 3D Cube */

.space3d {
  perspective: 1000px;
  width: 350px;
  height: 250px;
  text-align: center;
  display: inline-block;
}

._3dbox {
  display: inline-block;
  transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(15deg);
}

._3dface {
  overflow: hidden;
  position: absolute;
  border: 1px solid #b07c38;
  background: #bb813a;
  box-shadow: inset 0 0 0px 0px rgba(0, 0, 0, 0.1), 0 0 0px rgba(0, 0, 0, 0.3);
  color: #333;
  line-height: 250px;
  opacity: 0.7;
}

._3dface--front {
  width: 350px;
  height: 250px;
  transform: translate3d(0, 0, 125px);
}

._3dface--top {
  width: 350px;
  height: 250px;
  transform: rotateX(90deg) translate3d(0, 0, 125px);
}

._3dface--top:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  background: #ac7a3b;
  content: "";
  width: 100%;
  display: block;
}

._3dface--bottom {
  width: 350px;
  height: 250px;
  transform: rotateX(-90deg) translate3d(0, 0, 125px);
}

._3dface--bottom:after {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  background: #ac7a3b;
  content: "";
  width: 100%;
  display: block;
}

._3dface--left {
  width: 250px;
  height: 250px;
  left: 37%;
  margin-left: -125px;
  transform: rotateY(-90deg) translate3d(0, 0, 130px);
}

._3dface--right {
  width: 250px;
  height: 250px;
  left: 63%;
  margin-left: -125px;
  transform: rotateY(90deg) translate3d(0, 0, 130px);
}

._3dface--back {
  width: 350px;
  height: 250px;
  transform: rotateY(180deg) translate3d(0, 0, 125px);
}

#radio-left:checked ~ .space3d ._3dbox {
  transform: rotateY(90deg);
}

#radio-right:checked ~ .space3d ._3dbox {
  transform: rotateY(-90deg);
}

#radio-bottom:checked ~ .space3d ._3dbox {
  transform:...

JavaScript

// set box dynamic width and height
jQuery('#boxHeight,#boxWidth, #boxzPosition').bind("keyup change", function(e) {
  makeBoxDynamic();
});


function makeBoxDynamic() {
  jQuery('._3dface--front').css("width", (jQuery('#boxWidth').val() * 10));
  jQuery('._3dface--front').css("height", (jQuery('#boxHeight').val() * 10));

  jQuery('._3dface--top').css("width", (jQuery('#boxWidth').val() * 10));
  jQuery('._3dface--top').css("height", jQuery('#boxzPosition').val());

  jQuery('._3dface--bottom').css("width", (jQuery('#boxWidth').val() * 10));
  jQuery('._3dface--bottom').css("height", jQuery('#boxzPosition').val());
  jQuery('._3dface--bottom').css("top", parseInt((jQuery('#boxHeight').val() * 10) - 250));

  jQuery('._3dface--left').css("width", jQuery('#boxzPosition').val());
  jQuery('._3dface--left').css("height", (jQuery('#boxHeight').val() * 10));

  jQuery('._3dface--right').css("width", jQuery('#boxzPosition').val());
  jQuery('._3dface--right').css("height", (jQuery('#boxHeight').val() * 10));
  jQuery('._3dface--right').css("left", parseInt((jQuery('#boxWidth').val() * 10) - 130));

  jQuery('._3dface--back').css("width", (jQuery('#boxWidth').val() * 10));
  jQuery('._3dface--back').css("height", (jQuery('#boxHeight').val() * 10));
}