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 預設換行 ...