/*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).*/
<script>
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
</script>