您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 2D 轉換

CSS3 2D 轉換

此節有 208 人學習過     參與評論

CSS3 轉換

通過 CSS3 轉換,我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

它如何工作?

轉換是使元素改變形狀、尺寸和位置的一種效果。

您可以使用 2D 或 3D 轉換來轉換您的元素。

瀏覽器支持

屬性 瀏覽器支持
transform

Internet Explorer 10、Firefox 以及 Opera 支持 transform 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注釋:Internet Explorer 9 需要前綴 -ms-。

2D 轉換

在本章中,您將學到如下 2D 轉換方法:

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

您將在下一章學習 3D 轉換。

實例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

親自試一試

translate() 方法

通過 translate() 方法,元素從其當前位置移動,根據給定的 left(x 坐標) 和 top(y 坐標) 位置參數:

實例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

親自試一試

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

rotate() 方法

通過 rotate() 方法,元素順時針旋轉給定的角度。允許負值,元素將逆時針旋轉。

實例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

親自試一試

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

scale() 方法

通過 scale() 方法,元素的尺寸會增加或減少,根據給定的寬度(X 軸)和高度(Y 軸)參數:

實例

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

親自試一試

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

skew() 方法

通過 skew() 方法,元素翻轉給定的角度,根據給定的水平線(X 軸)和垂直線(Y 軸)參數:

實例

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

親自試一試

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

matrix() 方法

matrix() 方法把所有 2D 轉換方法組合在一起。

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

實例

如何使用 matrix 方法將 div 元素旋轉 30 度:

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

親自試一試

新的轉換屬性

下面的表格列出了所有的轉換屬性:

屬性 描述 CSS
transform 向元素應用 2D 或 3D 轉換。 3
transform-origin 允許你改變被轉換元素的位置。 3

2D Transform 方法

函數 描述
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 軸。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (208人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 芳芳好紧好滑好湿好爽| 黑人巨茎大战白人美女| 饥渴少妇bd播放| japanesetube学生老师| 日本韩国香港三级大全| 日韩丰满孕妇孕交| 中国女人内谢25xxxxx| 成年免费a级毛片免费看| 国产免费破外女真实出血视频| 亚洲av无码专区在线电影| 亚洲日韩天堂在线| 千梦影院免费高清电影| av老司机午夜福利片免费观看| 久久草色播| α片毛片香港经典免费观看| 欧美一第一页草草影院| 帅哥吃直男大雕视频| 成年网站未满十八禁| 黄页网站大全免费软件| 久久久久精品精品6精品精品| 美女视频脱空全都露视频app免费| 丁香婷婷激情综合俺也去| 亂倫近親相姦中文字幕| 韩国三级| 孕妇| 男女直接做的视频| 宝贝乖好紧夹得我好爽| 特级欧美午夜aa片| 日韩av在线观看免费| 欧美在线看欧美视频免费| 非会员试看120秒毛片| http://www.jaa-dentou-geijutsu.com