요청하신 \'순수한 CSS\' 측면에 초점을 맞춘 두 가지 가능한 제목은 다음과 같습니다. 1. Pure CSS를 사용하여 클릭 시 이미지를 45도 회전할 수 있나요? (질문을 강조하고, \'순수 C

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

이 기사에서는 클릭 시 이미지에 회전 애니메이션을 구현하는 방법을 살펴보겠습니다. CSS만. 원래 질문부터 시작하겠습니다.

질문:

사용자가 CSS를 사용하여 이미지를 45도 회전하여 십자 기호를 만들고 싶었습니다. 그러나 호버에 의존하는 코드는 onclick 이벤트에 대해 작동하지 않았습니다. 그들은 순수한 CSS를 사용하여 간단한 솔루션을 찾았습니다.

답변:

클릭 시 회전을 수행하려면 대신 ':active' 의사 클래스를 활용할 수 있습니다. ':호버'. 수정된 코드는 다음과 같습니다.

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

그러나 이 수정 사항은 클릭 활동이 끝난 후 변환이 지속되는 문제를 해결하지 않습니다. 이 문제를 해결하기 위해 JavaScript를 통합할 수 있지만 순수한 CSS 솔루션의 경우 지속성은 불가능합니다.

위 내용은 요청하신 \'순수한 CSS\' 측면에 초점을 맞춘 두 가지 가능한 제목은 다음과 같습니다. 1. Pure CSS를 사용하여 클릭 시 이미지를 45도 회전할 수 있나요? (질문을 강조하고, \'순수 C의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!