使用CSS3实现反向进度条

Question

我有这个例子。

我想要将进度条翻转180度，从右往左进行。得到类似下面的结果：

我尝试改变transition属性，但没有结果。

代码：

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

- Mils

---

"transform: rotate(180deg);" 对我起了作用。 - Stefan Candan

Answer 1

将进度条设置为块状并向右浮动：

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

演示

- Zoltan Toth

Answer 2

将 span 元素设置为块级元素，并使用 margin-left 属性。但您还需要反转进度。例如，30% 需要设置 margin-left:70%; http://jsfiddle.net/fmaGZ/2/

- Prinzhorn