使用纯CSS的CSS3点击转换

我试图让一个图像（加号）旋转45度来创建一个十字符号。到目前为止，我已经使用下面的代码实现了这一点，但它在悬停上工作，我想让它在点击时旋转

有没有一种简单的方法可以使用CSS来实现这一点

我的代码是：

CSS

img{
显示：块；
利润率：20px；
}
.交叉旋转{
-webkit转换持续时间：1s；
-moz转换持续时间：1s；
-o-过渡持续时间：1s；
过渡时间：1s；
-webkit转换属性：-webkit转换；
-moz变换特性：-moz变换；
-o-变换性质：-o-变换；
过渡性质：变换；
}
.交叉旋转：悬停{
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}

HTML

---

这是演示。

您可以使用JavaScript，通过onClick方法来实现这一点。

---

如果您想要一个只使用css的解决方案，这可能会有所帮助

但当活动移动时，这种转变不会持续。为此，您需要javascript（jquery是最干净的IMO）

---

正如jeremyjjbrow所说，

：active

pseudo不会持久存在。但是在纯css上做这件事有一个技巧。您可以将其包装在

标记上，并在其上应用

:active

，如下所示：

<a class="test">
    <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
 </a>

试试看。。。它可以工作（至少在Chrome上）

方法#1:CSS

：focus

伪类 作为纯CSS解决方案，您可以通过使用图像的属性和伪类实现某种效果，如下所示：

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

注意：使用这种方法，图像会在单击（聚焦）后旋转，要取消旋转，您需要单击图像之外的某个位置（模糊）

方法#2：隐藏输入&

：选中

伪类 这是我最喜欢的方法之一。在这种方法中，有一个隐藏的复选框输入和一个包装图像的

元素

单击图像后，将检查隐藏的输入，因为标签使用了

for

属性

因此，通过使用伪类和

+

，我们可以获得要旋转的图像：

<input type="checkbox" id="hacky-input">

<label for="hacky-input">
  <img class="crossRotate" src="http://placehold.it/100">
</label>

（将

旋转

应用于标签可提供更好的体验）

方法#3：通过JavaScript切换类 如果使用JavaScript/jQuery是一个选项，则可以通过切换

.active

类来触发旋转效果，如下所示：

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

$（'.crossRotate'）。在（'click'，function（）上{
$（this.toggleClass（'active'）；
});

.crossRotate.active{
/*供应商前缀在这里*/
变换：旋转（45度）；
}

---

您还可以使用:target伪类影响不同的DOM元素。 如果元素是锚定目标的目标，它将获得：target伪元素

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>

p{颜色：黑色；}
目标{颜色：红色；}
我会改变

这是一把小提琴：

瞧

div{
背景色：红色；
颜色：白色；
字体大小：粗体；
宽度：48px；
高度：48px；
变换：旋转（360度）；
转变：转变0.5s；
}
分区：活动{
变换：旋转（0度）；
转换：0s；
}

---

不，只有chrome。。。我没注意到。很好的电话只是检查一下，这样的东西很容易被烧坏。在Firefox上不起作用，在Chrome和Safari上起作用。。。在Firefox上，你需要点击并按住以使其完全启动？你把它投入生产了吗？@jeremyjjbrown，对不起，我不明白你的确切意思。这是你的电话号码。为

transform

属性添加了

-moz

前缀。我想问您是否愿意在生产环境中使用此解决方案？我只是好奇。@jeremyjjbrown我避免在我的项目中旋转图像：）我只是想展示CSS的能力。同意，切换它们可能更干净。我只是想知道你认为以这种方式使用tabindex有多强大。这是我从一个新来者那里看到的比较好的问题之一。使用jQuery很好，我已经按照你说的做了，它可以按我想要的方式工作，还有一件事，所以你点击它一次，它就会以一种方式旋转45度，您将如何对其进行编码，使其再次单击并返回到其原始位置45度？感谢您的帮助，这似乎并没有完成，只是做了原来的45度旋转点击。只需要它旋转45度，下一次点击时旋转-45度，然后重复这个顺序…再试一次，我在你的小提琴上测试过。请确保将该类添加到图像中并删除活动css规则OK，该规则正在按我所希望的方式工作只是您必须单击并按住以实现它，我只想单击一次，然后再次单击以使其返回-45度，感谢您的帮助：）我在您的基础上添加了一个小提琴。顺便说一句，你因为接受了答案而得到了代表。如果我只想旋转180度怎么办？

<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />

<input type="checkbox" id="hacky-input">

<label for="hacky-input">
  <img class="crossRotate" src="http://placehold.it/100">
</label>

<style>
p { color:black; }
p:target { color:red; }
</style>

<a href="#elem">Click me</a>
<p id="elem">And I will change</p>