CSS3 transition on click using pure CSS

Question

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   lt body gt      lt img class  crossRotate  src  images cross png  alt  Cross Menu button    gt   lt  body gt    Here is the jsfiddle demo

User · Answer

You can also affect differente DOM elements using :target pseudo class. If an element is the destination of an anchor target it will get the :target pseudo element.

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>

Here is a fiddle : https://jsfiddle.net/k86b81jv/

User · Answer

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

User · Answer

Voila    x000D   x000D  div   x000D    background-color  red  x000D    color  white  x000D    font-weight  bold  x000D    width  48px  x000D    height  48px    x000D    transform  rotate 360deg   x000D    transition  transform 0 5s  x000D    x000D   x000D  div active   x000D    transform  rotate 0deg   x000D    transition   0s  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

Method  1  CSS  focus pseudo-class  As pure CSS solution  you could achieve sort of the effect by using a tabindex attribute for the image  and  focus pseudo-class as follows    lt img class  crossRotate  src  http   placehold it 100  tabindex  1    gt     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    Method  2  Hidden input  amp   checked pseudo-class  This is one of my favorite methods  In this approach  there s a hidden checkbox input and a  lt label gt  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    lt input type  checkbox  id  hacky-input  gt    lt label for  hacky-input  gt     lt img class  crossRotate  src  http   placehold it 100  gt   lt  label gt     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    Method  3  Toggling a class via JavaScript  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

User · Answer

As jeremyjjbrow said   active pseudo won t persist  But there s a hack for doing it on pure css  You can wrap it on a  lt a gt  tag  and apply the  active on it  like this    lt a class  test  gt       lt img class  crossRotate  src  images cross png  alt  Cross Menu button    gt    lt  a gt    And the css    test active  crossRotate       transform  rotate 45deg       -webkit-transform  rotate 45deg       -ms-transform  rotate 45deg           Try it out    It works  at least on Chrome

User · Answer

You can use JavaScript to do this  with onClick method   This maybe helps CSS3 transition click event

[css] CSS3 transition on click using pure CSS

Examples related to css

Examples related to rotation

Examples related to css-transitions

Examples related to transition