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

Question

我正在使用fa-bar-chart图标，但我想让这些线条从左到右与x＆amp; 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);
 }