CSS3中的skew翻轉(zhuǎn)是一個(gè)非常有用的屬性,可以讓我們實(shí)現(xiàn)各種炫酷的效果,比如傾斜文字、仿射變換等等。
.skewed { transform: skew(20deg, 10deg); /* 第一個(gè)參數(shù)是X軸的傾斜角度,第二個(gè)參數(shù)是Y軸的傾斜角度 */ }
上面的代碼將一個(gè)元素向右下方傾斜,傾斜角度為20度和10度。
我們也可以使用skewX和skewY屬性分別控制X軸和Y軸的傾斜角度:
.skewed-x { transform: skewX(20deg); /* 只傾斜X軸,傾斜角度為20度 */ } .skewed-y { transform: skewY(10deg); /* 只傾斜Y軸,傾斜角度為10度 */ }
運(yùn)用skew翻轉(zhuǎn)可以實(shí)現(xiàn)很多有趣的效果,比如:
- 模擬文字傾斜、旋轉(zhuǎn)、扭曲等
- 實(shí)現(xiàn)3D效果
- 使用仿射變換進(jìn)行圖像扭曲
總之,CSS3中的skew屬性是一個(gè)非常實(shí)用的變換屬性,可以讓我們輕松實(shí)現(xiàn)各種炫酷的效果。
上一篇mysql查詢表字段名稱
下一篇css3 xml樣式