Image transform rotate not rotating - html

Question

I am trying to get an image of an X I have to rotate 180 degrees when it is being hovered over, however it is just moving up and to the right instead of rotating.
What am I doing wrong that this won't look like it is spinning 180 degrees?
.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

The cross moves up (and to the right) because of the translate transform that you are adding when it is being hovered. I believe you are adding this to center the element and in that case, it is better that it is added to the default state of the element itself.
The rotate is actually happening but you aren't seing it because a 180deg rotate of a cross gives the same output. You can add a transition to see the rotation (or) change the rotation angle.
.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

Working Demo
add this is css in your code:
#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 3

Here is my solution
#-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/

Answer 4

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