Androbaut Androbaut - 4 months ago 9
CSS Question

How to rotate an input toggle image properly?

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>
<a href="http://codepen.io/"><h3>codepen.io</h3></a>
</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

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:

enter image description here

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