是否可以旋转和翻转图标？

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

产生所需的结果(从左到右的左到右).

修改了你的JSFiddle以显示结果.

Answer 2

您可以将此代码用于 Flip ：

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