css3中translation用法的几点感悟

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
比如我需要制作途中的数字3，鼠标一点击，就可以发生旋转。
代码如下：

<section class="list">
      <a class="translate"href="javascript:;">3
      </a>
    </section>
.translate{    position: static;
    float: left;
    display: block;
    height: 78px;
    border-radius: 0px;
    line-height: 80px;
    width: 100px;
    color: #ec9573;
    font-size: 80px;
    text-align: center;
    text-indent: 0px;
    background: none;
    transition: All 1s ease-in-out;
    -webkit-transition: All 1s ease-in-out;
    -moz-transition: All 1s ease-in-out;
    -o-transition: All 1s ease-in-out;}
主要是translation的属性。交互感很强。