Html 旋转div中的一个形状，同时使另一个div保持在同一位置

我在一个div中有一个菱形，其中有一个图像，还有一个div中有绝对位置的文本。悬停时，我希望菱形旋转，但不希望文本旋转。有可能实现吗？我想我必须稍微修改一下HTML。 以下是我迄今为止的尝试：

HTML:

---

谢谢你的帮助

将

id=myimage

分配给html

，然后将css从

.rel

更改为

#myimage

。您只需旋转图像，对吗？

我不确定您是否正在寻找此图像：

我的变化

.rel {
    position: relative;

}

.rel:hover img{
    animation: spin 3s infinite linear;
} 

还有动画，因为这对我来说毫无意义

@keyframes spin {
    from { 
      transform: rotate(45deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%;
    }
    to { 
      transform: rotate(405deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%; }
    }
}

---

你把它称为钻石，所以我想你想保持它直立。我想这就是你想要的：

---

我所做的只是将

.rel:hover

更改为

.dn diamond img:hover

。这不会旋转

h4

当您旋转父div（.rel:hover）时，似乎只需要旋转图像或其父div。您有几个答案。如果其中任何一项对你合适，你应该投票/接受它。否则，请帮助他们帮你评论你不喜欢的答案你在这个问题上有什么运气吗？谢谢你的回答，但我想让钻石在3d中旋转，所以绕着它自己的轴旋转谢谢，但不幸的是它仍然以不希望的方向旋转图像：-（是的，没错。不幸的是，它仍然不起作用

.rel {
    position: relative;

}

.rel:hover img{
    animation: spin 3s infinite linear;
} 

@keyframes spin {
    from { 
      transform: rotate(45deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%;
    }
    to { 
      transform: rotate(405deg) translateX(-100px) translateY(45px);
      transform-origin: 50% 50%; }
    }
}