Image transform rotieren nicht rotieren

Question

Ich versuche, ein Bild von einem X zu bekommen Ich muss um 180 Grad drehen, wenn es überschwebt, aber es bewegt sich nur nach oben und nach rechts, anstatt zu drehen.

Was mache ich falsch, dass dies nicht so aussieht, als würde es um 180 Grad drehen?

.black { 
 
    background: #000; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.popup-close { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 40px; 
 
} 
 
#x-close:hover { 
 
    -webkit-transform: translate(50%, -50%) rotate(180deg); 
 
    transform: translate(50%, -50%) rotate(180deg); 
 
}

<div class="black"> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#"> 
 
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"> 
 
    </a> 
 
</div>

Answer 1

Das Kreuz bewegt sich nach oben (und rechts) wegen der translate Transformation, die Sie hinzufügen, wenn es schwebt wird. Ich glaube, dass Sie dies hinzufügen, um das Element zu zentrieren, und in diesem Fall ist es besser, dass es dem Standardzustand des Elements selbst hinzugefügt wird.

Die drehen geschieht eigentlich aber Sie sind seing es nicht, weil ein 180 Grad drehen eines Kreuzes die gleiche Leistung gibt. Sie können einen Übergang hinzufügen, um die Drehung zu sehen (oder) den Drehwinkel zu ändern.

.black { 
 
    background: #000; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.popup-close { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 40px; 
 
} 
 
#x-close { 
 
    transform: translate(50%, -50%); 
 
    transition: transform 1s ease; 
 
} 
 
#x-close:hover { 
 
    -webkit-transform: translate(50%, -50%) rotate(180deg); 
 
    transform: translate(50%, -50%) rotate(180deg); 
 
}

<div class="black"> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#"> 
 
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"> 
 
    </a> 
 
</div>

Answer 2

Dies sollte es tun:

#x-close:hover { 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
    -webkit-transition: transform 0.5s ease;  
    transition: transform 0.5s ease; 
} 

Answer 3

Arbeits Demo

diese CSS in Ihrem Code ist hinzuzufügen:

#x-close{ 
     -webkit-transition: -webkit-transform .8s ease-in-out; 
     transition: transform .8s ease-in-out; 
     -webkit-transform: translate(50%, -50%); 
     transform: translate(50%, -50%) ; 
    } 

Answer 4

Hier ist meine Lösung

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(180deg); } 
} 
@keyframes spin { 
    100% { 
     -moz-transform:rotate(180deg); 
     -o-transform:rotate(180deg); 
     transform:rotate(180deg); 
    } 
} 

https://jsfiddle.net/hk2ums6p/