六 .CSS3 轉換

CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。

（一）2D 轉換

2D變換方法：

• translate() 【根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動】eg:{transform: translate(50px,100px)}
• rotate() 【在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。】eg:{transform: rotate(30deg);}
• scale() 【該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數】eg:{transform: scale(2,3)}
• skew() 【包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。】
  eg:{transform: skew(30deg,20deg);}

　　語法：transform:skew(<angle> [,<angle>]);

　　包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。

　　（1）skewX(<angle>);表示只在X軸(水平方向)傾斜。

　　（2）skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

• matrix() 【matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。】eg:{transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  }

（二）3D 轉換

3D 轉換方法：

• rotateX() 【圍繞其在一個給定度數X軸旋轉的元素】eg:{transform: rotateX(120deg);}
• rotateY() 【圍繞其在一個給定度數Y軸旋轉的元素。】eg:{transform: rotateY(130deg);}

七.CSS3過渡

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：（1）指定要新增效果的CSS屬性；（2）指定效果的持續時間。

八.CSS3動畫

　CSS3 @keyframes 規則

要建立 CSS3 動畫，你需要了解 @keyframes 規則。@keyframes 規則是建立動畫。@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

九.CSS3多列

CSS3 可以將文字內容設計成像報紙一樣的多列布局。

CSS3 的多列屬性:

• column-count（指定了需要分割的列數）
• column-gap（指定了列與列間的間隙。）
• column-rule-style（指定了列與列間的邊框樣式）
• column-rule-width （指定了兩列的邊框厚度）
• column-rule-color（指定了兩列的邊框顏色）
• column-rule（是 column-rule-* 所有屬性的簡寫，設定了列直接的邊框的厚度，樣式及顏色）
• column-span （column-span:all;指定元素跨越所有列）
• column-width（指定了列的寬度）

十.CSS3使用者介面

在 CSS3 中, 增加了一些新的使用者介面特性來調整元素尺寸，框尺寸和外邊框。

使用者介面屬性：

• resize （指定一個元素是否應該由使用者去調整大小）
• box-sizing （允許您以確切的方式定義適應某個區域的具體內容）
• outline-offset

　　outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

　　輪廓與邊框有兩點不同：（1）輪廓不佔用空間；（2）輪廓可能是非矩形