根据窗口宽度进行CSS3翻译

Question

足够简单，可能是CSS3的基础知识，但我还没有得到它。

我理解如何使用transform：translate（x，y）在元素上应用受控翻译，但如果我不知道其来源和目的地，我该怎么办？

我希望看到列表项的两个轴上的翻译，因为当它们的容器宽度减小时，它们会重新组织。

是否可以使用CSS？

<style>

ul
{
    width:100%;
    height:100%;
    background:red;
    font-size:0;
    padding:20px;
}

li
{  
    font-size:16px;
    text-align:center;
    list-style-type:none;
    display:inline-block;
    width:140px;
    height:120px;
    background:blue;
    margin:10px;
    color:#fff;
}

</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

谢谢。

PS：jQuery允许。

http://jsfiddle.net/fu6d3/