CSS3 transform 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

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>

Here is the jsfiddle demo.

jeremyjjbrown · Accepted Answer · 2014-02-20T21:39:30.003

41

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

edited Feb 20 '14 at 21:39

answered Feb 20 '14 at 20:42

jeremyjjbrown

7,772
5
43
55

Using that jQuery is fine, I've done what you said and it works as I want it, one more thing, so you click it once and it rotates by 45 degrees one way, how would you code it so that you click again and it goes back 45 degrees to its original position? Thanks for your help – user2498890 Feb 20 '14 at 21:10
That doesn't seem to of done it, just doing the original 45 degree rotation on click. Just need it to rotate by 45 degrees and then -45 degrees the next time its clicked and then just repeat that sequence... – user2498890 Feb 20 '14 at 21:22
Try again, I tested on your fiddle. be sure to add the class to the image and remove the active css rule – jeremyjjbrown Feb 20 '14 at 21:29
Ok that is working how I want it just that you have to click and hold to achieve that as it is, i just want to click once and then click again to get it to go back -45deg, thanks for your help :) – user2498890 Feb 20 '14 at 21:36
I added a fiddle based on yours. BTW, you get rep for accepting an answer. – jeremyjjbrown Feb 20 '14 at 21:40
Brilliant, got it - didn't realise the CSS had changed, mine was conflicting it. Thanks so much for your help! – user2498890 Feb 20 '14 at 21:46

Hashem Qolami · Answer 2 · 2014-02-21T15:54:33.857

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:

<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).

Method #2: Hidden input & `:checked` pseudo-class

This 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).

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.

@jeremyjjbrown, Sorry I didn't understand what exactly you mean. Here is the **[updated demo](http://jsbin.com/fulocomu/2/edit)**. Added `-moz` prefix for the `transform` property. — Hashem Qolami, Feb 20 '14 at 21:08
I'm asking if you would feel comfortable with using this solution in a production environment? I'm just curious. — jeremyjjbrown, Feb 20 '14 at 21:09
@jeremyjjbrown I avoid rotating images in my projects :) I'm just trying to show the ability of CSS. — Hashem Qolami, Feb 20 '14 at 21:12
Agreed, switching them is probably cleaner. I was just wondering how robust you thought using the tabindex in that way is. — jeremyjjbrown, Feb 20 '14 at 21:16
With Method #2, you can put the input inside the label, and then you can simplify the CSS a bit. — equaeghe, Feb 21 '17 at 09:37

score 24 · Answer 3 · answered Jan 08 '19 at 16:23

24

Voila!

div {
  background-color: red;
  color: white;
  font-weight: bold;
  width: 48px;
  height: 48px;  
  transform: rotate(360deg);
  transition: transform 0.5s;
}

div:active {
  transform: rotate(0deg);
  transition:  0s;
}

<div></div>

answered Jan 08 '19 at 16:23

kaheglar

251
2
3

What if i want to rotate only 180deg? – Tmh May 18 '20 at 15:12

score 2 · Answer 4 · answered Aug 31 '15 at 11:23

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/

LcSalazar · Answer 5 · 2014-02-20T20:54:44.467

1

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 <a> tag, and apply the :active on it, like this:

<a class="test">
    <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
 </a>

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)!

edited Feb 20 '14 at 20:54

answered Feb 20 '14 at 20:47

LcSalazar

16,524
3
37
69

1

No, only chrome... Didn't notice that. Nice call – LcSalazar Feb 20 '14 at 20:54
Just checking, it's easy to get burned on stuff like that. – jeremyjjbrown Feb 20 '14 at 20:56
Doesn't seem to work on Firefox, works on Chrome & Safari... on Firefox you need to click and hold to get it to turn fully? – user2498890 Feb 20 '14 at 21:00

score 0 · Answer 6 · answered Oct 02 '21 at 07:35

You can use WebkitTransform along with Transition (transition: all 2s;) to make the desired rotation with animation.

<style> 
div.a {
  width: 150px;
  height: 80px;
  background-color: yellow;
  transition: all 2s;
  
}
</style>

<div class="a" id="box">Your Image Here</div>

<button onclick="rotate()">Rotate </button>

<script>

function rotate()
{
   x= document.getElementById("box");
  
  x.style.WebkitTransform = 'rotate(' + 20 +'deg)';
}

</script>

The advantage with this method is that you can do it programmatically. You can specify the angle using javascript (Although this is not required in your partcular case).

score 0 · Answer 7 · answered Jun 14 '22 at 08:22

0

Refer this.

.c-btn:hover,.c-btn-active {
  transform: rotate(45deg);
}

answered Jun 14 '22 at 08:22

Ameri

11
1

score -1 · Answer 8 · edited May 23 '17 at 12:02

-1

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

edited May 23 '17 at 12:02

Community

1
1

answered Feb 20 '14 at 20:41

Lucas Haas

331
1
2
15

CSS3 transform on click using pure CSS

8 Answers8

Method #1: CSS `:focus` pseudo-class

Method #2: Hidden input & `:checked` pseudo-class

Method #3: Toggling a class via JavaScript

Linked

Related

CSS3 transform on click using pure CSS

8 Answers8

Method #1: CSS :focus pseudo-class

Method #2: Hidden input & :checked pseudo-class

Method #3: Toggling a class via JavaScript

Linked

Related

Method #1: CSS `:focus` pseudo-class

Method #2: Hidden input & `:checked` pseudo-class