How to rotate an input toggle image properly? - html

Question

I've got a simple input toggle that reveals text when 'toggled'.
Codepen
HTML
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">
<img class="arrow" src="http://45.79.67.59/moreinfo_arrow.png">
</label>
<div>
<h3>codepen.io</h3>
</div>
</div>
CSS
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 <img> 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!

Answer 1

Problem
The origin of your transformation is not the center of the image. So it rotates about the wrong reference point. See the following picture:
This picture is showing the result of rotating a square using transform: rotate(45deg) with different transform-origin values.
Solution
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 (of the image) what means it will take the center of the parent. Since you specified the width as 1% the center isn't the same as the center of the image. So to solve this I've felt free to change this to the width of the image (what is in this case width:200px;).
Alternatively you could specify the origin manually with absolute values (in your case transform-origin:100px 100px;).
See JSFiddle.