JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<input max="360" min="0" value="0" id="slider" type="range" step="10"
/>
<div class="parent">
  <img class="box" id="box" src="https://s3.ap-south-1.amazonaws.com/republic-invideo/_1609225834773.png"/>
  
  <img class="box1" id="box1" src="https://dspewdm6uepxg.cloudfront.net/480x480/asset_snapshot_1609748009813.png"/>
</div>

CSS

body {
  font-family: sans-serif;
}

.parent {
  display: flex;
  height: 100vh;
  width: 100%;
  background: #cccccc;
  perspective: 2000px;
  justify-content: center;
  padding-top: 10px;
  
}

.box {
  width: 300px;
  height: 500px;
  background: red;
  display: flex;
  font-size: 30px;
  font-weight: 600;
  color: white;
 }

.box1 {
  width: 500px;
  height: 300px;
  background: red;
  display: flex;
  font-size: 30px;
  font-weight: 600;
  color: white;
  margin-left: 10px;
  transform-origin: center center;
}

input {
  width: 50%;
}

JavaScript

const box = document.getElementById("box");
const box1 = document.getElementById("box1");
document.getElementById("slider").oninput = e => {
  const value = e.target.value * -1;
  box.style.transform = `rotateX(${value}deg)`;
  box1.style.transform = `rotateX(${value}deg)`;
}