CSS3入門之轉換

2022-01-11 03:56:22 字數 3085 閱讀 4495

css3入門之轉換

body

body>*:first-child

body>*:last-child

p, blockquote, ul, ol, dl, table, pre

h1, h2, h3, h4, h5, h6

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code

h1 h2

h3 h4

h5 h6

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p

a a:hover

ul, ol

ul li>:first-child, ol li>:first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type

ul ul, ul ol, ol ol, ol ul

dl dl dt

dl dt:first-child

dl dt>:first-child

dl dt>:last-child

dl dd

dl dd>:first-child

dl dd>:last-child

pre, code, tt

code, tt

pre>code

pre

pre code, pre tt

kbd

blockquote

blockquote>:first-child

blockquote>:last-child

hr img 轉換是使元素改變形狀、尺寸和位置的一種效果,主要能實現的效果如下:

移動縮放

轉動拉長

拉伸css3的轉換屬性為transform,ie10+,firefox,chrome,opera,safari等現代瀏覽器支援transform屬性,ie9需要-ms-字首。

準備工作:

translate(/*x座標移動位移*/ left, /*y座標移動位移*/ top)

rotate(/*旋轉角度*/ deg)

scale(/*寬度縮放比例*/ widthscale, /*高度縮放比例*/ heightscale)

skew(/*x軸傾斜角度*/ xdeg, /*y軸傾斜角度*/ ydeg)

函式描述

matrix(n,n,n,n,n,n)

定義 2d 轉換,使用六個值的矩陣。

translate(x,y)

定義 2d 轉換,沿著 x 和 y 軸移動元素。

translatex(n)

定義 2d 轉換,沿著 x 軸移動元素。

translatey(n)

定義 2d 轉換,沿著 y 軸移動元素。

scale(x,y)

定義 2d 縮放轉換,改變元素的寬度和高度。

scalex(n)

定義 2d 縮放轉換,改變元素的寬度。

scaley(n)

定義 2d 縮放轉換,改變元素的高度。

rotate(angle)

定義 2d 旋轉,在引數中規定角度。

skew(x-angle,y-angle)

定義 2d 傾斜轉換,沿著 x 和 y 軸。

skewx(angle)

定義 2d 傾斜轉換,沿著 x 軸。

skewy(angle)

定義 2d 傾斜轉換,沿著 y 軸。

函式描述

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n)

定義 3d 轉換,使用 16 個值的 4x4 矩陣。

translate3d(x,y,z)

定義 3d 轉化。

translatex(x)

定義 3d 轉化,僅使用用於 x 軸的值。

translatey(y)

定義 3d 轉化,僅使用用於 y 軸的值。

translatez(z)

定義 3d 轉化,僅使用用於 z 軸的值。

scale3d(x,y,z)

定義 3d 縮放轉換。

scalex(x)

定義 3d 縮放轉換,通過給定乙個 x 軸的值。

scaley(y)

定義 3d 縮放轉換,通過給定乙個 y 軸的值。

scalez(z)

定義 3d 縮放轉換,通過給定乙個 z 軸的值。

rotate3d(x,y,z,angle)

定義 3d 旋轉。

rotatex(angle)

定義沿 x 軸的 3d 旋轉。

rotatey(angle)

定義沿 y 軸的 3d 旋轉。

rotatez(angle)

定義沿 z 軸的 3d 旋轉。

perspective(n)

定義 3d 轉換元素的透視檢視。

CSS3關於轉換

旋轉 rotate 旋轉xyz軸 正順時針負逆時針,單值預設z,3d 1,1,1,25deg 三面合力各做25deg形成的向量力。平移 translate 沒有脫離文件流,百分比相對於自身的寬高,旋轉平移先後區別,會有不同的效果。縮放 scale 縮放單值預設同時應用xy軸,z軸是厚度,3d是集合顯...

css3入門筆記

1.border radius 用於建立圓角邊框 2.box shadow 新增陰影 3.border image 使用建立邊框 1.background size 能夠規定背景的尺寸,重複使用背景 以畫素或百分比規定尺寸。百分比規定,尺寸相對于父元素 2.background origin 規定背...

CSS3入門之文字與字型

1 css3文字效果 語法 text shadow h shadow v shadow blur color 水平陰影 垂直陰影 模糊距離 陰影顏色 示例 該屬性相容ie10 以及所有現代瀏覽器 語法 word break normal break all keep all normal 預設換行 ...