JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="vr">
  <div class="box"></div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div.vr {
  width: 600px;
  height: 200px;
  background: black;
  margin: auto;
}
div.box {
  border: 5px solid green;
  width: 25%;
  height: 100%;
  background: red;
  /* transform-origin: right; */
  transform: rotateY(-60deg);
  transform-origin: left;
  transform-style: preserve-3d;
  perspective : 100px;
}

JavaScript

var a = document.getElementsByClassName('box');
var b = a.length

var c = [];
let max = 0 ;

var maxel = null;
/* var d = Array.from(a);

d.reduce((v, p) => {
console.log(v, p)
  max = v.offsetHeight > p.offsetHeight ? v : p
})
console.log(max); */

for(var i = 0; i < b; i++ ) {
  if(a[i].offsetHeight > max){
  	maxel = a[i];
    max = a[i].offsetHeight;
  }
}
console.log(maxel);