CSS3 변환을 사용하여 클릭 시 이미지를 어떻게 회전할 수 있나요?

순수 CSS를 사용하여 클릭 시 CSS3 변환

사용자 상호 작용을 향상하기 위한 노력의 일환으로 CSS3를 사용하여 클릭 시 요소를 변환해야 할 수도 있습니다. 특히 이미지를 회전하여 십자 기호를 만드는 것은 일반적인 작업입니다. 호버링은 변환의 일반적인 트리거이지만 이 기사에서는 CSS를 통해서만 onClick 이벤트를 사용할 수 있는 가능성을 살펴봅니다.

처음에 제공된 코드는 호버 이벤트를 활용하여 이미지를 45도 회전합니다. 그러나 클릭 시 변환을 실행하려면 수정이 필요합니다.

활성 상태 변환

CSS는 클릭할 때 요소의 스타일을 지정하도록 설계된 :active 의사 클래스를 제공합니다. 이 의사 클래스를 활용하면 원하는 동작을 얻을 수 있습니다.

<code class="css">.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}</code>

이 코드는 클릭 시 이미지를 45도 회전합니다. 그러나 클릭을 놓으면 변형이 사라진다는 점에 유의하는 것이 중요합니다. 이는 :active 상태가 클릭 자체 중에만 활성화되기 때문입니다.

JavaScript로 변환 유지

클릭 후에도 변환이 지속되도록 하려면 JavaScript를 사용해야 합니다. jQuery를 사용하여 클릭 이벤트를 캡처하면 css() 메서드를 사용하여 변환을 전환할 수 있습니다.

<code class="javascript">$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});</code>

이 코드에서는 변환 속성이 ​​확인됩니다. 없음으로 설정되면 변환이 적용되고, 그렇지 않으면 제거됩니다. 이를 통해 클릭할 때마다 십자 기호를 켜거나 끌 수 있습니다.

이러한 기술을 활용하면 JavaScript 유무에 관계없이 클릭 시 CSS3 변환을 사용하여 이미지를 효과적으로 회전하여 클릭 이후에도 변환을 유지할 수 있습니다. 이벤트.

위 내용은 CSS3 변환을 사용하여 클릭 시 이미지를 어떻게 회전할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!