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: 700;
    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); 
}

 

 

 

　　
• 你好！！！
　　
• 你坏！！
　　
• 你变态！