<h1>3D SCROLL</h1>
        <form action="">
            <input type="number" placeholder="MAX=26" class="count">
            <button class="submit">Submit</button>
        </form>
        <div class="axis">
            <div class="container">
            </div>
        </div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  transform-style: preserve-3d;
  perspective: 100vw;
  user-select: none;
}

.axis {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

h1 {
  position: absolute;
  color: #fff;
  font-size: 4vw;
  transform: translateY(1vw);
}

form {
  position: absolute;
  top: 10vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.count {
  width: 6em;
  font-size: 3vw;
  text-align: center;
  color: gray;
  background: none;
  border: none;
  border-bottom: 2px solid gray;
  outline: none;
}
.submit {
  margin-top: 2vh;
  width: 5em;
  font-size: 1.5vw;
  color: gray;
  background: none;
  border: 1px solid gray;
  outline: none;
  cursor: pointer;
}
.submit:hover {
  color: #000;
  background: gray;
}
.submit:active {
  background: #646464;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 80vw;
  height: 80vw;
  transform: translate3d(-50%, -50%, 0) rotateX(-90deg);
  transform-style: preserve-3d;
}

.card_frame {
  position: absolute;
  top: 0;
  left: 50%;
  height: 50%;
  width: 0;
  transform-style: preserve-3d;
  transform-origin: bottom;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotateX(90deg) translate3d(-50%, 0, 0);
  backdrop-filter: blur(4px);
  cursor: grab;
  border-radius:2px;
}

.card:active {
  cursor: grabbing;
}

(() => {
    const axis = document.querySelector(".axis");
    const count = document.querySelector(".count");
    const submit = document.querySelector(".submit");
    const container = document.querySelector(".container");
    const letter = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "n",
        "m",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
    ];
    let axisX;
    // let axisY;
    let startDeg;
    let differenceDeg;
    let applyDeg = 0;
    let drag = false;

    function setCards(countNum){
        if(countNum>26){
            alert('write 26 or less');
        }else{
            container.innerHTML=''
            for (let i = 0; i < countNum; i++) {
                container.innerHTML+=`
                <div class="card_frame">
                    <div class="card"></div>
                </div>`
            }
            const frame = document.querySelectorAll(".card_frame");
            const card = document.querySelectorAll(".card");
        
            for (let i = 0; i < frame.length; i++) {
                frame[i].style.transform = `rotateZ(${(360 / frame.length) * i}deg)`;
                card[i].style.width = `${120 / card.length}vw`;
                card[i].style.height = `${120 / card.length *1.1}vw`;
                card[i].innerHTML = letter[i];
            }

            for (let i = 0; i < card.length; i++) {
                card[i].addEventListener("mousedown", function () {
                    drag = true;
                });
            }
            window.addEventListener("mouseup", function () {
                drag = false;
            });
        }  
    }

    submit.addEventListener('click',function(e){
        e.preventDefault();
        setCards(count.value)
        count.focus()
    })

    window.addEventListener('load',function(){
        setCards(15)
    })
    
    window.addEventListener("mousemove", function (e) {
        axisX = (window.innerHeight / 2 - e.clientY) * 0.02;
        if (drag == true) {
            differenceDeg = e.clientX - startDeg;
            applyDeg += differenceDeg * 0.1;
        }
        axis.style.transform = `rotateX(${axisX}deg) rotateY(${applyDeg}deg)`;
        startDeg = e.clientX;
    });
})();