反向图像存档：使用 CSS / Javascript 从下到上堆叠图像？

想知道是否有人有解决方案。
我想展示一个缩略图存档，最旧的缩略图位于底部，最新的缩略图位于顶部。我还希望流程本身被逆转......像这样：

页面应右对齐，并将未来的图像添加到页面顶部。我正在使用 PHP 从 MySQL 数据库中提取图像文件名来动态创建页面。这里的问题是我希望这种布局是流畅的，这意味着大多数用于计算图像和相应地构建 HTML 的 PHP 技巧都被排除在外了。

有没有办法用 Javascript 甚至 CSS 来做到这一点？

See: http://jsfiddle.net/thirtydot/pft6p/ http://jsfiddle.net/thirtydot/pft6p/

这使用float: right to 订购div按要求 http://jsfiddle.net/thirtydot/pft6p/2/, then transform: scaleY(-1) 翻转整个容器 http://jsfiddle.net/thirtydot/pft6p/1/， 最后transform: scaleY(-1) again 将每个单独的图像翻转回来 http://jsfiddle.net/thirtydot/pft6p/.

它可以在 IE9 及更高版本和所有现代浏览器中运行。

CSS:

#container, #container > div {
    -webkit-transform: scaleY(-1);
       -moz-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
         -o-transform: scaleY(-1);
            transform: scaleY(-1);
}

#container {
    background: #ccc;
    overflow: hidden;
}
#container > div {
    float: right;
    width: 100px;
    height: 150px;
    border: 1px solid red;
    margin: 15px;
    font-size: 48px;
    line-height: 150px;
    text-align: center;
    background: #fff;
}

HTML:

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    ..
</div>