Ist es möglich, ein Symbol zu drehen UND zu spiegeln?

Question

Ich verwende das Fa-Bar-Diagramm-Symbol, aber ich möchte die Zeilen von links nach rechts mit der x & Y-Achse beginnen in der unteren linken Ecke.

Ich dachte, ich paaren könnten beide 'fa drehen-90' und 'fa-Flip-horizontal' dorthin zu gelangen, aber die Kombination der beiden funktioniert nicht:

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

Beliebig Vorschläge?

Answer 1

Unter Verwendung der folgenden CSS:

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

erzeugt das gewünschte Ergebnis (Balken mit links y-Achse links nach rechts).

Geändert Ihre JSFiddle um das Ergebnis zu zeigen.