Javascript 使用CSS3反向progressbar

我有这个

我想将进度条反转180度，从右向左进行。 要获得这样的东西：

我试图更改转换属性，但没有结果

代码：

.progress-bar span {
        display: inline-block;
        height: 100%;
        background-color: #777;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        transition: width .4s ease-in-out;      
}

---

将span设为块元素，并使用

左边距
。但你也需要逆转这一进程。例如，30%的需求
剩余利润：70%

制作进度条块并将其向右浮动：

.progress-bar span {
    display: block;
    float: right;
    ...
}

变换：旋转（180度）；你为我做了这个把戏