css3通过scale()实现放大功能、通过rotate()实现旋转功能

css3通过scale()实现放大功能、通过rotate()实现旋转功能，下面有个示例，大家可以参考下

通过scale()实现放大功能

通过rotate()实现旋转功能

而transition则可设置元素变化所需的时间

html中的结构代码:

<ul id="demoarc">
　　<li>你好！！！</li>
　　<li>你坏！！</li>
　　<li>你变态！</li>
</ul> 

css3样式：

ul#demoarc{
　　margin-top:50px;
　　list-style:none;
}
ul#demoarc li{
    cursor:pointer;
    list-style:none;
    display:inline-block;
    width:150px;
    height:150px;
    float:left;
    font-size:24px;
    line-height:150px;
    color: #fff;
    font-weight:;
    text-align: center;
    border:2px solid #F0E68C;
    background: #FF4500;
    margin-left:10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
}
ul#demoarc li:hover{
    -webkit-transform:scale(1.5) rotate(10deg);
    -moz-transform:scale(1.5) rotate(10deg);
    -o-transform:scale(1.5) rotate(10deg);
}

　　
• 你好！！！

　　

• 你坏！！

　　

• 你变态！