font-awesome - 是否可以旋转和翻转图标？

Question

我正在使用fa-bar-chart图标，但我希望线条从左到右，且x＆y轴从左下角开始。

我以为可以同时将“fa-rotate-90”和“fa-flip-horizo​​ntal”配对使用，但是将两者结合起来是行不通的:

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

有什么建议么？

Answer 1

使用以下CSS:

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

产生所需的结果(横条从左到右，y轴为左)。

修改了 JSFiddle以显示结果。