How to Rotate an Image 45 Degrees on Click with Pure CSS?

CSS3 Transformation on Click: A Pure CSS Approach

In web development, transforming elements is often a crucial aspect for creating engaging and functional interfaces. One such transformation that can be achieved using CSS3 is rotation. This article explores how to apply a 45-degree rotation to an image (specifically a plus symbol) upon click, utilizing pure CSS.

The provided code successfully rotates the image on hover. However, to achieve the desired behavior of rotating on click, a slight modification is necessary.

In CSS, the ':active' pseudo-class represents the state where an element or its descendants are being clicked or activated. By leveraging this pseudo-class, we can add a CSS rule that applies the rotation transformation upon clicking the image.

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

Upon implementing this rule, clicking the image will rotate it 45 degrees. It's important to note that this transformation is temporary and will revert to its original state when the click is released.

For a more permanent solution where the transformation persists beyond the click event, JavaScript can be incorporated. Using jQuery, one can achieve this by capturing the click event and toggling the rotation transformation accordingly.

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

This snippet toggles the rotation transformation when the image is clicked. When the image is in its default state, clicking it will rotate it 45 degrees. Clicking it again will revert it to its original position.

The above is the detailed content of How to Rotate an Image 45 Degrees on Click with Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!