CSS3 是指 Cascading Style Sheets 的第三個版本,21 指的是該版本中的第 21 章節,即 2D 轉換(2D Transformations)的部分。CSS3 中的 2D 轉換具有非常強大的功能,可以在網頁設計中實現許多炫酷的效果。
/*指定元素的樣式*/
.transform {
/*將元素的寬度改為 100px,高度為 50px*/
width: 100px;
height: 50px;
/*指定元素的背景顏色為 #ccc*/
background-color: #ccc;
/*設置元素的邊框寬度為 1px,樣式為實線,顏色為黑色*/
border: 1px solid #000;
/*設置元素的 2D 轉換:將元素向右移動 50px,向下移動 50px*/
transform: translate(50px, 50px);
}
上面的代碼中,我們通過指定元素的樣式,設置了元素的寬度、高度、背景顏色和邊框樣式。而在 transform 屬性中,我們使用了 2D 轉換的 translate() 方法,將元素向右移動了 50px,向下移動了 50px。
使用 CSS3 的 2D 轉換,我們還可以實現元素的旋轉、縮放、傾斜等效果。這些效果的實現都是非常簡單的,只需要設置對應的 transform 屬性即可。