【问题标题】：How to retain CSS transform scale on checked state如何在选中状态下保留 CSS 变换比例
【发布时间】：2016-02-25 15:50:01
【问题描述】：

我正在寻找一种简单的纯 CSS 方法来创建 :hover scale 转换，该转换保留基于 :checked 状态的比例。这就是我所追求的：

目前，在我的示例中，itemB 在:hover 上有一个scale(2)，它工作正常。我的问题是，当项目为 checked（这些图标由隐藏的单选按钮支持）时，我似乎无法想出一种 CSS-only 方式来保持比例。

这是我正在使用的 HTML 结构：

...
<ul>
    <li>
        <input type="radio" id="itemA" />
        <label class="icon" for="itemA">
            <img src="..." />
        </label>
    </li>
    <li>
        <input type="radio" id="itemB" />
        <label class="icon" for="itemB">
            <img src="..." />
        </label>
    </li>
    <li>
        <input type="radio" id="itemC" />
        <label class="icon" for="itemC">
            <img src="..." />
        </label>
    </li>
</ul>
...

还有我的 CSS：

li input[type="radio"] + label img {
    width: 50px;
    margin: 50% auto;
    transition: all .3s;
}

li:hover input[type="radio"] + label img {
    transform: scale(2);
}

我认为最简单的方法是为选中状态添加另一个选择器：

li input[type="radio"]:checked + label img {
    transform: scale(2);
}

但这似乎不起作用，我不知道为什么。有什么想法吗？请不要使用 jQuery 或其他 JS 建议。我正在尝试仅使用 CSS3 来完成这个简单的效果。感谢您的帮助。

【问题讨论】：

你能给我们演示一下吗？您最后给出的选择器应该可以正常工作。
该死的。我确实工作！我只是浪费了几个小时试图找出原因，结果证明这是一个服务器缓存问题（即使我已将其配置为不缓存）。对不起，打扰了。并感谢那些试图帮助我的人。这不是问题。

标签： css css-transitions css-transforms

【解决方案1】：

检查状态

将选中状态添加到输入元素应保持图像上的比例。
检查代码：

 li input[type="radio"]:checked + label img {
  transform: scale(2);
  transform-origin: center left;
}

小提琴示例：

ul {} li input[type="radio"] + label img {
  width: 50px;
  transition: all .3s;
}
li:hover input[type="radio"] + label img {
  transform: scale(2);
  transform-origin: center left;
}
li input[type="radio"]:checked + label img {
  transform: scale(2);
  transform-origin: center left;
}

<ul>
  <li>
    <input type="radio" id="itemA" />
    <label class="icon" for="itemA">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
  <li>
    <input type="radio" id="itemB" />
    <label class="icon" for="itemB">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
  <li>
    <input type="radio" id="itemC" />
    <label class="icon" for="itemC">
      <img src="http://www.lorempixel.com/50/50" />
    </label>
  </li>
</ul>

【讨论】：

感谢您的回答。事实证明我只是遇到了缓存问题。 :checked 规模确实有效。我会将您的答案标记为正确，因为您基本上确认了我已经拥有的内容。谢谢！

【解决方案2】：

您在第二个块中的比例也是 2。我尝试使用比例 1 for li input[type="radio"]:checked + label img 进行此操作。

【讨论】：

感谢您的浏览。我更多的是一个错误（缓存）。原来的 scale(2) 确实有效。