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

 

 

 

　　
• 你好！！！
　　
• 你壞！！
　　
• 你變態！