如何正确旋转输入切换图像？

Question

我有一个简单的输入切换，在'切换'时显示文字。

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; }

当切换<img>被'检查'时，我希望它旋转180˚，但是，我无法使图像在其中心轴上旋转。它目前在它的边缘旋转：有利于引发轻笑...对潜在用户来说不太好。

非常感谢任何帮助！

Answer 1

问题

转换的原点不是图像的中心。所以它围绕错误的参考点旋转。见下图：

此图片显示使用transform: rotate(45deg)以不同transform-origin值旋转正方形的结果。

解决方案

通常只需将 transform-origin: center center; 添加到transform属性（但说实话，这也是默认值）。

所以你的实际问题是你在父（图像的）上指定了转换，这意味着它将占据父级的中心。由于您将宽度指定为1%，因此中心与图像的中心不同。所以为了解决这个问题，我可以随意将其更改为图像的宽度（本例中为width:200px;）。

或者，您可以使用绝对值手动指定原点（在您的情况下为transform-origin:100px 100px;）。

请参阅JSFiddle 。