Css 在不变换内部图标的情况下变换div

我正在尝试使用CSS转换属性转换悬停时的

div

我让转换做我想做的，但不幸的是它将转换（逻辑上我猜）应用于

div

的内容，我只想将转换应用于

div

，而不是底层内容（本例中的图标）

我在这里看到了一些方法，包括对图标应用反向转换，但当我这样做时，它只是放大了效果

这是：

.MsgBtnIcon{
位置：固定；
底部：0px；
右：7px；
填充：0px；
}
#变性人2组{
显示：块；
位置：固定；
底部：0px；
右：0px；
背景色：#03A9F4；
宽度：75px；
高度：75px；
文本对齐：居中；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
过渡：所有1都易于输入输出；
}
#transDemo2分区：悬停，
#transDemo2分区悬停效应{
-webkit变换：旋转（360度）缩放（2，2）translateX（-19px）translateY（-19px）；
-moz变换：旋转（360度）缩放（2，2）translateX（-19px）translateY（-19px）；
-ms变换：旋转（360度）缩放（2，2）translateX（-19px）translateY（-19px）；
变换：旋转（360度）缩放（2，2）translateX（-19px）translateY（-19px）；
}

---

您可以通过将

MsgBtnIcon

移动为hover div的子对象并添加

指针事件：none

来完成此操作

.MsgBtnIcon{
位置：固定；
底部：0px；
右：7px；
填充：0px；
指针事件：无；
}
#变性人2组{
显示：块；
位置：固定；
底部：0px；
右：0px；
背景色：#03A9F4；
宽度：75px；
高度：75px；
文本对齐：居中；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-ms转换：所有1都易于输入输出；
过渡：所有1都易于输入输出；
}
#transDemo2 div：悬停，#transDemo2 div.hover_效果{
-webkit变换：旋转（360度）缩放（2,2）translateX（-19px）translateY（-19px）；
-moz变换：旋转（360度）缩放（2,2）translateX（-19px）translateY（-19px）；
-ms变换：旋转（360度）缩放（2,2）translateX（-19px）translateY（-19px）；
变换：旋转（360度）缩放（2,2）translateX（-19px）translateY（-19px）；
}

---

与其反对转换，不如简单地将遭受转换的部分与未受影响的部分分开：

X

---

毕竟，在本例中，“hover”div似乎只是作为背景出现的。

要撤消所有变换还是仅撤消缩放？-所以你希望背景旋转并放大，但图标保持在原位而不是放大？有没有理由否决投票？除非你知道什么地方出了问题，否则你是无法纠正的。我没有投反对票，但你更新的JSFIDLE不应该工作得很好，谢谢！最后我做了一个onClick而不是hover的变体，但是你的评论确实让我离最终目标更近了，所以谢谢！

<script src="https://use.fontawesome.com/353bc64522.js"></script>

<div id="transDemo2">
  <div class="hover">
  </div>
  <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true">X</i>
</div>