Here are two possible titles, focusing on the \'pure CSS\' aspect you requested: 1. Can I Rotate an Image 45 Degrees on Click with Pure CSS? (Emphasizes the question, and the \'pure C

CSS Transform on Click Using Pure CSS

In this article, we'll explore how to achieve rotation animation on an image on click using only CSS. Let's start with the original question.

Question:

A user wanted to rotate an image 45 degrees using CSS to create a cross symbol. However, their code, which relied on hover, didn't work for onclick events. They sought a simple solution using pure CSS.

Answer:

To accomplish the on-click rotation, we can utilize the ':active' pseudo-class instead of ':hover'. Here's the revised code:

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

However, this fix doesn't address the persistence of the transformation once the click activity ends. To address this, we could incorporate JavaScript, but for a pure CSS solution, persistence isn't feasible.

The above is the detailed content of Here are two possible titles, focusing on the \'pure CSS\' aspect you requested: 1. Can I Rotate an Image 45 Degrees on Click with Pure CSS? (Emphasizes the question, and the \'pure C. For more information, please follow other related articles on the PHP Chinese website!