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

Question

我有一个简单的输入切换开关，可以在 'toggled' 时显示文本。

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> 为 'checked' 时，我希望它旋转 180˚，但是，我无法让图像绕其中心轴旋转。它目前在它的边缘旋转：有利于引起笑声......对潜在用户不太好。

非常感谢任何帮助！

Answer 1

问题

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

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

解决方案

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

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

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

参见JSFiddle。

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

How to rotate an input toggle image properly?

html

css

css-transforms

问题

解决方案