Transformieren Sie ein div, ohne das Symbol zu transformieren

Question

Ich versuche eine div bei Hover mithilfe der CSS-Transformationseigenschaften zu transformieren.

Ich habe die Transformation zu tun, was ich will, aber leider seine Anwendung der Transformation (logisch denke ich), um den Inhalt der div Ich mag nur das den div anwenden verwandeln, aber nicht den zugrunde liegenden Inhalt (ein Symbol in diesem Fall).

Ich habe ein paar Methoden hier gesehen, einschließlich der Anwendung der umgekehrten Übergang auf das Symbol, aber wenn ich das tat, multipliziert es nur den Effekt.

Hier ist my code:

.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

Sie können dies erreichen, indem die MsgBtnIcon bewegt ein Kind des Hover div zu sein und pointer-events: none hinzuzufügen.

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

vielmehr gegen die Transformation als kämpfen, vielleicht wäre es besser, das Teil einfach trennen, die die Umwandlung von dem Teil leidet, die unnafected bleibt: 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> 

Afte Das "Schweben" div scheint in diesem Fall einfach da zu sein, um als Hintergrund zu dienen.