Как повернуть значок стрелки в левой части? Без поворота всей иконки? Только css

Мне нужно повернуть значок влево. У меня есть пример с правой стороны, и это работает хорошо, но мне нужно и с левой стороны.

Проверьте это ->

https://codepen.io/HektorW/pen/eJMMaR

Это пример кода ->

.arrow {
  cursor: pointer;
  height: 120px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform 0.1s;
  width: 80px;
  
}
.arrow-top, .arrow-bottom {
  background-color: #666;
  height: 4px;
  left: -5px;
  position: absolute;
  top: 50%;
  width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
  background-color: #fff;
  content: '';
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.15s;
}
.arrow-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}
.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0s;
}
.arrow-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}
.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0s;
}
.arrow:active {
  transform: translateX(-50%) translateY(-50%) scale(0.9);
}

Что я пытаюсь ->>>

.arrow {
  cursor: pointer;
  height: 120px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(180deg); ADD ROTATE 
  transition: transform 0.1s;
  width: 80px;
}

Я добавил поворот (180 градусов), но это не рабочее свойство, потому что при щелчке вся стрелка поворачивается ко мне.

Мне нужна стрелка вверху и внизу, чтобы изменить

Я также пытаюсь установить

преобразование-происхождение: вверху слева;

Вставленное преобразование-происхождение: вверху справа;

но и не точный угол стрелки.

Редактировать:

Также попробуйте не менять анимацию....