jquery - 使用 JQuery 添加类和图像

Question

我有一个标志，不得不将它分成顶部和底部，以尝试在标志的底部实现旋转效果。

主要目标是获取我徽标的底部锯片部分并使其在悬停时旋转/旋转。

我可以让它旋转/旋转，但由于标志被分成两部分。我必须使用 z-index 来堆叠图像，并且底部徽标在低于顶部图像时不会旋转，因为顶部图像挡住了底部图像。

我尝试使用 Jquery 来解决问题，但还不熟悉编码。

有人可以看看这个 CodePen 并帮助我。

这是笔/代码的链接： http: //codepen.io/daugaard47/pen/yKrdD

如果您反转 z-index，您可以看到旋转效果。

谢谢你。-克里斯

Answer 1

整洁的设计！

这是一个工作版本 http://codepen.io/patrickkettner/pen/byFIl

你真的很接近 - 只是一些调整。将 :hover 侦听器添加到包装器中，这样您就无需担心堆叠。其次，为动画元素添加一个 gpu hack（我使用 translateZ），以防止元素跳转到 gpu 进行动画处理然后返回 cpu 到其静止状态的任何闪烁（查看http://www.youtube. com/watch?v=8uAYE5G1gSs获取比您需要了解的有关该主题的更多信息）。