Perspective/main.js at main · asadpro888/Perspective · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
const sizeInput = document.getElementById('input2');
const radiusInput = document.getElementById('input3');
const shadowInput = document.getElementById('input4');
const blurInput = document.getElementById('input5');
let main = document.querySelector('body');
const childElement = document.querySelector('.child');

if (sizeInput && childElement) {
  sizeInput.addEventListener('change', (event) => {
    const value = parseFloat(event.target.value);
    if (value > 40) {
      childElement.style.transform = `rotateX(${value}90deg)`;
    }
  });
}

if (radiusInput && childElement) {
  radiusInput.addEventListener('change', (event) => {
    const value = parseFloat(event.target.value);
    if (value >= 40) {
      childElement.style.transform = `rotateY(${value}90deg)`;
    }
  });
}

if (shadowInput && childElement) {
    shadowInput.addEventListener('change', (event) => {
      const value = parseFloat(event.target.value);
      if (value >= 40) {
        childElement.style.transform = `rotateZ(${value}90deg)`;
      }
    });
  }

  if (blurInput && childElement) {
    blurInput.addEventListener('change', (event) => {
      const value = parseFloat(event.target.value);
      if (value >= 40) {
        childElement.style.parseFloat = `(${value})`;
      }
    });
}