Menu
I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate on click.
Is there a simple way of doing so using CSS?
My code is:
CSS
img { display: block; margin: 20px; } .crossRotate { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } .crossRotate:hover { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } HTML
<body> <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" /> </body> Here is the jsfiddle demo.
375
To make the transition occur, you must specify at least two things — the name of the CSS property to which you want to apply the transition effect using the transition-property CSS property, and the duration of the transition effect (greater than 0) using the transition-duration CSS property.
CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements. It's easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples: You can visualize property changes.
If you want a css only solution you can use active
.crossRotate:active { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO).
$( ".crossRotate" ).click(function() { if ( $( this ).css( "transform" ) == 'none' ){ $(this).css("transform","rotate(45deg)"); } else { $(this).css("transform","" ); } }); Fiddle
161
:focus pseudo-classAs pure CSS solution, you could achieve sort of the effect by using a tabindex attribute for the image, and :focus pseudo-class as follows:
<img class="crossRotate" src="http://placehold.it/100" tabindex="1" /> .crossRotate { outline: 0; /* other styles... */ } .crossRotate:focus { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } WORKING DEMO.
Note: Using this approach, the image gets rotated onclick (focused), to negate the rotation, you'll need to click somewhere out of the image (blured).
:checked pseudo-classThis is one of my favorite methods. In this approach, there's a hidden checkbox input and a <label> element which wraps the image.
Once you click on the image, the hidden input is checked because of using for attribute for the label.
Hence by using the :checked pseudo-class and adjacent sibling selector +, we could get the image to be rotated:
<input type="checkbox" id="hacky-input"> <label for="hacky-input"> <img class="crossRotate" src="http://placehold.it/100"> </label> #hacky-input { display: none; /* Hide the input */ } #hacky-input:checked + label img.crossRotate { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } WORKING DEMO #1.
WORKING DEMO #2 (Applying the rotate to the label gives a better experience).
If using JavaScript/jQuery is an option, you could toggle a .active class by .toggleClass() to trigger the rotation effect, as follows:
$('.crossRotate').on('click', function(){ $(this).toggleClass('active'); }); .crossRotate.active { /* vendor-prefixes here... */ transform: rotate(45deg); } WORKING DEMO.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
