CSS基礎知識(七)

2021-09-25 17:22:00 字數 1656 閱讀 5185

transform

translate()

rotate()

scale()

skew()

matrix()

值 rotate(30deg) 把元素順時針旋轉 30 度。

值 translate(50px,100px) 把元素從左側移動 50 畫素,從頂端移動 100 畫素。

值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍,把高度轉換為原始高度的 4 倍。

值 skew(30deg,20deg) 圍繞 x 軸把元素翻轉 30 度,圍繞 y 軸翻轉 20 度。

matrix() 方法需要六個引數,包含數學函式,允許您:旋轉、縮放、移動以及傾斜元素。

通過 rotatex() 方法,元素圍繞其 x 軸以給定的度數進行旋轉。

180度的效果

通過 rotatey() 方法,元素圍繞其 y 軸以給定的度數進行旋轉。

180度的效果

從紅到黃到藍最後變綠

@keyframes myfirst

25%

50%

100%

}

column-count屬性指定元素的列數

olumn-gap屬性指定的列之間的差距

column-rule屬性設定列之間的寬度,樣式和顏色

當寬度為0時可以設定邊框實現繪製圖形

可以將其他邊框設定為透明實現三角形

甚至可以省略下邊框

梯形

width: 200px;

HTML(XHTML)基礎知識(七) CSS

在 html 文件中引入 css 的方式 使用 標籤 在css 中的度量單位 css中的度量單位 單位說明 百分比 cm厘公尺 em字型寬度 ex字母 x 的字型高度 in英吋 mm公釐 pc12pt pt1 72 英吋 px畫素 css 中的顏色表示 css 中的顏色表示 表示方式 說明顏色名 特...

CSS 基礎知識

選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...

CSS基礎知識

css規則有兩個主要的部分組成 選擇器,以及一條或者多條宣告h1 css內部的注釋以 開始,以 結束p id選擇器,通過 來選擇html元素 username class選擇器,通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...