Androbaut Androbaut - 2 months ago 6x
CSS Question

How to rotate an input toggle image properly?

I've got a simple input toggle that reveals text when 'toggled'.



<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">
<img class="arrow" src="">
<a href=""><h3></h3></a>


div.window {
color: #000;
width: 100%;
background: #fff;
margin: 0px;
font-family: Arial Black, sans-serif;
font-size: 20px;
div.window label{
display: block;
width: 1%;
transition: all 0.75s 0.25s;
transform: rotate(0);
input.toggle ~ div {
height: 0px; margin: .1rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
input.toggle:checked ~ div { height: 60px; }
input.toggle:checked + label { transform: rotate(180deg); }
input.toggle { display: none; }

When the toggle
is 'checked', I'd like it to rotate 180˚, however, I've had trouble making the image rotate on it's center axis. It currently rotates on it's edge: good for eliciting a chuckle... not so good for potential users.

Any help is very much appreciated!



The origin of your transformation is not the center of the image. So it rotates about the wrong reference point. See the following picture:

enter image description here

This picture is showing the result of rotating a square using transform: rotate(45deg) with different transform-origin values.


Normally just add transform-origin: center center; to the transform property (but to be honest, that's also the default value).

So your actual problem is that you specified the transition on the parent what means it will take the center of the parent. Since you specified the width as 1% it isn't the center of the image. So I've felt free to change this to the width of the image (what is in this case 200px).

Alternatively you could specify the origin manually with absolute values (in your case transform-origin:100px 100px;).

See JSFiddle.