Is it possible to rotate AND flip an icon?

Question

I am using the fa-bar-chart icon, but I'd like to have the lines going from left-to-right with the x & y axis starting in the bottom left corner.

I thought I could pair both 'fa-rotate-90' and 'fa-flip-horizontal' to get there, but combining the two does not work:

<div>
<i class="fa fa-bar-chart"></i> normal<br>
<i class="fa fa-bar-chart fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-bar-chart fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-bar-chart fa-rotate-90 fa-flip-horizontal"></i> fa-rotate-90 AND fa-flip-horizontal<br>
</div>

https://jsfiddle.net/virtusts/Lmtdk5ot/

Any suggestions?

Answer 1

Using the following CSS:

.fa-bar-chart {
  transform: rotate(90deg) scaleX(-1);
}

produces the desired outcome (bars left to right with left y axis).

Modified your JSFiddle to show the outcome.

Answer 2

You can use this code for Flip :

.fa-flip-horizontal { 
  transform: scaleX(-1);
 }