Html CSS:Transform rotate on仅悬停列表容器，而不是子容器或内容

当列表容器本身仅使用html和CSS在悬停状态下旋转时，我很难弄清楚如何保持列表容器中的元素静态

基本上，我在字体图标周围有一个菱形框，当我悬停时，整个列表容器旋转45度并形成一个正方形，但这也会将我的图标内部旋转45度。我知道在没有悬停旋转的情况下如何分离变换，但是添加悬停动作似乎可以覆盖我尝试的所有操作

以下是所讨论的html：

好的

以下是相关的CSS：

.社会党{
边框样式：实心；
边框宽度：2倍；
显示：内联flex；
宽度：90px；
高度：90px；
保证金：自动35px；
背景色：#0000ff00；
变换：旋转（45度）；
变换样式：保留-3d；
位置：相对位置；
转变：转变0.25s；
对齐项目：居中；
证明内容：中心；
}
.社交网站：悬停{
背景色：#FFCC00；
宽度：90px；
高度：90px；
变换：旋转（0度）；
}
.socialitem:hover.fab{
转化：无；
转换：转换0s；
}
.晶圆厂{
变换：旋转（-45度）；
转换：转换0s；
}
.社会{
文本对齐：居中；
}

以下github页面模板网页上的社交媒体图标链接具有我试图模仿的行为：

---

只需在跨度内添加内容，并使其抵消父级的转换

.socialitem>span{
变换：旋转（-45度）；
转变：转变0.25s；
}
.socialitem:悬停>跨距{
变换：旋转（0度）；
}

.socialitem{
边框样式：实心；
边框宽度：2倍；
显示：内联flex；
宽度：90px；
高度：90px；
保证金：自动35px；
背景色：#0000ff00；
变换：旋转（45度）；
变换样式：保留-3d；
位置：相对位置；
转变：转变0.25s；
对齐项目：居中；
证明内容：中心；
}
.社交网站：悬停{
背景色：#FFCC00；
宽度：90px；
高度：90px；
变换：旋转（0度）；
}
.socialitem>span{
变换：旋转（-45度）；
转变：转变0.25s；
}
.socialitem:悬停>跨距{
变换：旋转（0度）；
}
.socialitem:hover.fab{
转化：无；
转换：转换0s；
}
.晶圆厂{
变换：旋转（-45度）；
转换：转换0s；
}
.社会{
文本对齐：居中；
}

好啊

u可以使用pseudo:：after来实现您的目标，而不会影响孩子

.socialitem{
位置：相对位置；
保证金：自动35px；
背景色：#0000ff00；
显示：内联flex；
对齐项目：居中；
证明内容：中心；
}
在…之后{
内容：“；
边框样式：实心；
边框宽度：2倍；
宽度：50px；
高度：50px；
变换：旋转（45度）；
变换样式：保留-3d；
转变：转变0.25s；
}
.socialitem:悬停：：之后{
变换：旋转（0度）；
}
.社会党*{
位置：绝对位置；
文本对齐：居中；
}
.社会{
文本对齐：居中；
}

好啊