Чтобы повернуть элемент на 180 градусов в CSS, вы можете использовать различные методы. Вот некоторые из них:

1. Использование свойства transform:

   .hover-element {
    transform: rotate(180deg);
   }

   Это повернет элемент на 180 градусов по часовой стрелке.

2. Использование анимации rotate:

   .hover-element {
    animation: rotate-180 1s;
   }
   @keyframes rotate-180 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(180deg);
    }
   }

   Это анимирует поворот элемента от 0 до 180 градусов в течение 1 секунды.

3. Использование свойства transition:

   .hover-element {
    transition: transform 0.5s;
   }
   .hover-element:hover {
    transform: rotate(180deg);
   }

   Это позволит плавно повернуть элемент на 180 градусов при наведении на него курсора.