改造一个div而不改造里面的图标

Question

我正在尝试使用 CSS 变换属性在悬停时变换 div。

我让变换做我想做的事，但不幸的是它应用变换（我猜逻辑上），到 div 的内容我只想应用变换 div 但是不是基础内容（在这种情况下是图标）。

我在这里看到了一些方法，包括对图标应用反向过渡，但当我这样做时，效果会成倍增加。

.MsgBtnIcon {
  position: fixed;
  bottom: 0px;
  right: 7px;
  padding: 0px;
}
#transDemo2 div {
  display: block;
  position: fixed;
  bottom: 0px;
  right: 0px;
  background-color: #03A9F4;
  width: 75px;
  height: 75px;
  text-align: center;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#transDemo2 div:hover,
#transDemo2 div.hover_effect {
  -webkit-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px);
  -moz-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px);
  -ms-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px);
  transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px);
}

<script src="https://use.fontawesome.com/353bc64522.js"></script>
<div id="transDemo2">
  <div class="hover">
    <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true"></i>
  </div>
</div>

Answer 1

您可以通过将 MsgBtnIcon 移动为悬停 div 的子项并添加 pointer-events: none.

来完成此操作

Updated fiddle example

.MsgBtnIcon {
  position: fixed;
  bottom: 0px;
  right:  7px;
  padding: 0px; 
  pointer-events: none;
}
#transDemo2 div {
  display: block;
  position: fixed;
  bottom: 0px;
  right: 0px; 
  background-color: #03A9F4;
  width: 75px;
  height: 75px;
  text-align:center;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

}

#transDemo2 div:hover, #transDemo2 div.hover_effect {
  -webkit-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  -moz-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  -ms-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
  transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px);
}

<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"></i>
</div>

Answer 2

与其对抗变换，不如简单地将遭受变换的部分与未受影响的部分分开： https://jsfiddle.net/m1hqzaqf/

<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>

毕竟，'hover' div，在这种情况下，似乎只是作为背景摆在那里。

改造一个div而不改造里面的图标

Transform a div without transforming icon inside

css

css-transitions

css-transforms

css-animations

Updated fiddle example