用css3实现九宫格分页显示

在完全不用js的前提下怎样实现九宫格分页显示呢？？其实只有简单的两行主要代码！
直接上代码：

<style>  
      *{        
              margin:0;        
              padding:0; 
              list-style: none; 
       }   
       .ulone{
              width:330px;
              margin:100px auto; 
       }
      .ulone li{
              width:98px;
              height:100px;
              margin:0 10px 10px 0;
              background: #f00; 
              float: left; 
              border:1px solid #ffffff;
      }  
      //这里就是重点了；
     .ulone li:hover{                    //伪类，当鼠标移入时；
              transform:scale(2,2);  //使li沿着分别x轴和y轴变为原来的两倍大小！
              transition:transform 2s; //在两秒的时间内完成！
      }
</style>

下面是一个简单的html布局

<ul class="ulone">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>