Isotope는 아이템들 간의 레이아웃을 조정하는 JavaScript 라이브러리입니다. 아이템에 회전 효과를 적용하려면 CSS의 transform 속성을 사용하여 회전 각도를 설정해야 합니다.

.item {
  transition: transform 0.3s ease-in-out;
}

.item:hover {
  transform: rotate(180deg);
}

위의 코드는 item 클래스를 가진 아이템에 마우스를 올리면 180도로 회전하는 효과를 제공합니다. transition 속성은 회전이 일어날 때의 애니메이션을 부드럽게 처리하기 위해 추가되었습니다.

이제 Isotope를 초기화하고 회전 효과를 적용할 아이템에 해당 CSS 클래스를 추가하여 사용할 수 있습니다.

var $grid = $('.grid').isotope({
  // Isotope 설정
});

$grid.on('layoutComplete', function() {
  // 레이아웃이 완료될 때마다 아이템들에 회전 효과를 적용
  $('.item').addClass('rotate-effect');
});

위의 코드에서 .grid는 Isotope를 적용할 컨테이너의 선택자이며, .item은 회전 효과를 적용할 아이템의 선택자입니다. layoutComplete 이벤트 핸들러에서 .item에 rotate-effect 클래스를 추가하여 회전 효과를 적용합니다.

이렇게하면 Isotope에서 아이템들에 대한 회전 효과를 적용할 수 있습니다.

참고 문서:

• Isotope Docs
• CSS Transform