[Javascript] 마우스 움직임에 따라 여러 div 3d로 기울이기

마우스 움직임에 따라 원들이 3d느낌으로 움직이는 ui를 만들어보았다. 저대로 사진만 넣으면 좀 더 실감나게 3d느낌을 낼 수 있지 않을까 싶다.

 

HTML

  <div class="section">

    <div class="circle"></div>

    <div class="circle"></div>

    <div class="circle"></div>

  </div>

 

CSS

.section{

  overflow: hidden;

  position: relative;

  width: 100%;

  height: 100vh;

}

.circle{

  position: absolute;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  transform-style: preserve-3d;

  perspective: 500px;

}

.circle:nth-child(1){

  top: 200px;

  left: -200px;

  background-color: blue;

}

.circle:nth-child(2){

  top: -100px;

  left: 600px;

  background-color:brown;

}

.circle:nth-child(3){

  top: 400px;

  left: 1400px;

  background-color:aquamarine;

}

3d느낌의 필수! transform-style: preserved-3d와 perspective 이다. 각각 3d로 받아들이고 3d의 과함정도(?)를 조절해준다고 생각하면 된다.

 

JAVASCRIPT

window.addEventListener('mousemove', function (e) {

  let rotateY = -40 / 1919 * e.clientX + 20;

  let rotateX = 20 / 851 * e.clientY - 10510 / 851;

  let translateX = -4 / 1919 * e.clientX + 2;

  let translateY = 4 / 851 * e.clientY -1702 / 851;

  document.querySelectorAll('.circle').forEach(e => { e.style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg) translateX(${translateX}px) translateY(${translateY}px)` })

})

뷰포트안에서 마우스가 움직이면 각 일차함수에 따라 circle의 transform의 변화를 주었다. queryselectorall은 nodelist라는 array자료로 인식하기 때문에 바로 style값을 변환해주면 오류가 나기 때문에 forEach 반복문으로 처리해준다. translateX와 Y값은 느낌상 조금 더 rotate값에 3d느낌을 주는 것 같아서 아주 작은 값만 움직이게 설정했다.

 

위의 것을 이용해서 포트폴리오나 통통튀는 사이트들에 이용하면 예쁜 홈페이지를 만들 수 있지 않을까하는 생각이 든다.