CSS3中的變形與動畫

標籤：水平   ted   orm   :hover   ota   顯示   技術   選擇性參數   round   

CSS3變形--旋轉 rotate()

旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。如所示：

HTML代碼：

<div class="wrapper">  <div></div></div>

CSS代碼：

.wrapper {  width: 200px;  height: 200px;  border: 1px dotted red;  margin: 100px auto;}.wrapper div {  width: 200px;  height: 200px;  background: orange;  -webkit-transform: rotate(45deg);  transform: rotate(45deg);}

示範結果

CSS3中的變形--扭曲 skew()

扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

Skew()具有三種情況：

1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。

2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

樣本示範：

通過skew（）函數將長方形變成平行四邊形。

HTML代碼：

<div class="wrapper">  <div>我變成平形四邊形</div></div>

CSS代碼：

.wrapper {  width: 300px;  height: 100px;  border: 2px dotted red;  margin: 30px auto;}.wrapper div {  width: 300px;  height: 100px;  line-height: 100px;  text-align: center;  color: #fff;  background: orange;  -webkit-transform: skew(45deg);  -moz-transform:skew(45deg)   transform:skew(45deg);}

示範結果

CSS3中的變形--縮放 scale()

縮放 scale()函數 讓元素根據中心原點對對象進行縮放。

縮放 scale 具有三種情況：

1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

例如：

div:hover {  -webkit-transform: scale(1.5,0.5);  -moz-transform:scale(1.5,0.5)  transform: scale(1.5,0.5);}

注意：Y是一個選擇性參數，如果沒有設定Y值，則表示X，Y兩個方向的縮放倍數是一樣的。

2、scaleX(x)元素僅水平方向縮放（X軸縮放）

 

CSS3中的變形與動畫