JSFiddle - React, Tailwind, and code Playground

by cs09g

HTML

<div style="height:50px"></div>
<div class="div1">
  <div id="origin"></div>
</div>
<div class="div1">
  <div id="div2">가나다라</div>
</div>
<div id="log">

</div>

CSS

.div1 {
    display:inline-block;
    position: relative;
    height: 150px;
    width: 150px;
    border: 1px solid black;
    perspective: 150px;
}

#div2 {
    top: 25px;
    width: 150px;
    position: absolute;
    background-color: red;
}

JavaScript

var degree = 0;
var direction = -1;
var height = 100;
var slope = 150;
var radian = 0;

setInterval(function() {
  degree += direction;
  document.getElementById("div2").style.transform  = "rotateX(" + degree +"deg)";
  
  if (degree > -1 || degree < -45) {
    direction *= -1;
  }
  
  radian = (90+degree)*Math.PI/180;
  slope = Math.abs((height)/Math.sin(radian));
  
  document.getElementById("div2").style.height = slope + "px";
  document.getElementById("log").innerHTML = degree+90;
}, 100);