How to rotate arrow icon in left side? Without rotate all icon ? Only css-CodePudding

I need to rotate icon to left side. I have example in right side and this is work good but i need also in left side.

Check this ->

This is example code ->

.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);
}

What i am try ->>>

.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;
}

I am added rotate(180deg) but this is no work property because on click the whole arrow turns to me.

I need arrow top and botton to change

I am also try to set

transform-origin: top left;

Insted transform-origin: top right;

but also is not accurate arrow corner.

Edit:

Also try to no change animation....

CodePudding user response：

You need to add the rotation in the :active class too:

  &:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(180deg);
  }

So the rotation keeps taking effect.

Example: CodePen

CodePudding user response：

You can do some small changes to have an arrow that has the animation in the correct direction.

You need to reverse the transform-origin and the transition-delay switching the two would give you an arrow that has a similar animation with the correct origin and format the arrow in the correct way.

body {
  background-color: #111;
}

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

    &-bottom:after {
      right: 0;
      transition-delay: $transition-time;
    }
  }
  
  &:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}

https://codepen.io/Kaehler/pen/QWajVgr