Est-il possible de faire pivoter ET de retourner une icône?

Question

J'utilise l'icône fa-bar-chart, mais j'aimerais que les lignes se déplacent de gauche à droite avec l'axe x x & commençant dans le coin inférieur gauche.

Je pensais que je pouvais jumeler les deux 'fa-rotate-90' et 'horizontale fa-flip' pour y arriver, mais la combinaison des deux ne fonctionne pas:

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

Tous suggestions?

Answer 1

Utilisation du CSS suivant:

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

produit le résultat souhaité (barres de gauche à droite avec la gauche axe y).

Modifié votre JSFiddle pour afficher le résultat.