Преобразование изображения не вращается

Question

Я пытаюсь получить изображение X Я должен вращать 180 градусов, когда он завис, но он просто движется вверх и направо, а не вращается.

Что я делаю неправильно, чтобы это не выглядело так, будто оно вращается на 180 градусов?

.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

Крест движется вверх (и справа) из-за translate преобразование, которое вы добавляете при его парил. Я считаю, что вы добавляете это, чтобы центрировать элемент, и в этом случае лучше добавить его к состоянию по умолчанию самого элемента.

Повернуть на самом деле происходит, но вы не Seing это потому 180deg поворот креста дает тот же результат. Вы можете добавить переход, чтобы увидеть поворот (или) изменить угол поворота.

.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

Это следует сделать это:

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

Answer 3

Рабочая Demo

добавить это CSS в вашем коде:

#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

Вот мое решение

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