JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<div id="outer">
    <div class="box" id="boxNormal"><div class="box2" id="box-one"></div></div>
    <div class="box"id="boxTranslated"><div class="box2" id="box-two"></div></div>
</div>

<span id="span-one"></span>
<span> :: </span>
<span id="span-two"></span>

CSS

#outer {
    padding: 50px;
    position: relative;
	-webkit-perspective: 200px;
    perspective: 200px;
}
#boxTranslated {
    -webkit-transform: rotateY( 45deg );
    transform: rotateY( 45deg );
}
.box {
    height: 50px;
    width: 50px;
    background: red;
    margin: 0 50px;
    float: left;
    padding: 20px;
}
.box2 {
    height: 50px;
    width: 50px;
    background: green;
}

JavaScript

$("#span-one").text($("#box-one").position().top);
$("#span-two").text($("#box-two").position().top);