[javascript] Isotope에서 아이템들에 대한 3D 회전 효과를 적용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope에서 아이템들에 대한 3D 회전 효과를 적용하는 방법은 있습니다. 이를 위해 Transform CSS 속성을 사용할 수 있습니다. 이 기능을 사용하려면 우선 Isotope 요소를 가지고 오거나 선택해야 합니다. 그런 다음 선택한 요소에 대해 “transform” 속성을 사용하여 회전 효과를 적용할 수 있습니다.

아래는 Isotope에서 아이템에 3D 회전 효과를 적용하는 예시 코드입니다:

// Isotope 요소 가져오기
var $grid = $('.grid').isotope({
  // options...
});

// Isotope 레이아웃 완료 후에 실행할 코드
$grid.on('layoutComplete', function() {
  // 각 아이템에 대해 3D 회전 효과 적용
  $('.grid-item').each(function() {
    var rotation = Math.random() * 360; // 랜덤한 회전값 생성
    $(this).css({
      'transform': 'rotateY(' + rotation + 'deg)',
      'transition': 'transform 0.3s ease' // 회전 애니메이션 속도와 가속도 설정
    });
  });
});

위의 코드는 Isotope 그리드 요소에서 아이템을 가져오고, 그리드 레이아웃이 완료된 후에 각 아이템에 대해 랜덤한 회전값을 생성하여 3D 회전 효과를 적용합니다.

참고 자료: