鼠标悬停grid-item时仅触发内部grid-image动画如何实现？

解决方案 #

你的问题出在CSS选择器的作用范围有误：当前的.grid-style:hover规则是把旋转动画绑定到了grid-item容器本身，所以鼠标悬停时整个容器都会触发旋转。
只需要调整hover的目标选择器，让动画仅作用于父容器悬停状态下的内部.grid-image元素即可，修改后的对应CSS代码如下：

/* 替换原有.grid-style:hover规则 */
.grid-style:hover .grid-image {
  animation: rotation 4s infinite linear;
}

如果需要优化旋转的视觉效果，还可以给.grid-image额外添加定位基准属性：

.grid-image {
  /* 原有属性保持不变，新增下面两项 */
  transform-origin: center;
  transform-style: preserve-3d;
}

修改后，鼠标悬停在grid-item任意位置时，只有内部的图片元素会触发3D旋转效果，其余文字和容器本身不会发生变化。

内容的提问来源于stack exchange，提问作者Ben