WEB前端培訓:CSS3 2D 轉換

日期:2020-12-04 10:30作者:北大青鳥西安建大IT學院

摘要:它是如何工作? 轉換的效果是讓某個元素改變形狀,大小和位置。 您可以使用 2D 或 3D 轉換來轉換您的元素。 鼠標移動到以下元素上,查看 2D 和 3D 的轉換效果: 2D 轉換 3D 轉換 瀏覽器
關鍵詞: 北大青鳥web前端

它是如何工作?

轉換的效果是讓某個元素改變形狀,大小和位置。

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

鼠標移動到以下元素上,查看 2D 和 3D 的轉換效果:

2D 轉換
3D 轉換

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

屬性          
transform 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
3.2 -webkit- 23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
3.2 -webkit- 23.0
15.0 -webkit-
12.1
10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 屬性.

Chrome 和 Safari 要求前綴 -webkit- 版本.

注意: Internet Explorer 9 要求前綴 -ms- 版本.


2D 轉換

在本章您將了解2D變換方法:

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

在下一章中您將了解3D轉換。

OperaSafariChromeFirefoxInternet Explorer

實例

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

 


translate() 方法

Translate

translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從當前元素位置移動。

OperaSafariChromeFirefoxInternet Explorer

實例

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

 

translate值(50px,100px)是從左邊元素移動50個像素,并從頂部移動100像素。


rotate() 方法

Rotate

rotate()方法,在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。

OperaSafariChromeFirefoxInternet Explorer

實例

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

 

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


scale() 方法

Scale

scale()方法,該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數:

OperaSafariChromeFirefoxInternet Explorer

實例

-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 標準語法 */

 

scale(2,3)轉變寬度為原來的大小的2倍,和其原始大小3倍的高度。


skew() 方法

語法

transform:skew(<angle> [,<angle>]);

包含兩個參數值,分別表示X軸和Y軸傾斜的角度,如果第二個參數為空,則默認為0,參數為負表示向相反方向傾斜。

  • skewX(<angle>);表示只在X軸(水平方向)傾斜。
  • skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
OperaSafariChromeFirefoxInternet Explorer

實例

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

skew(30deg,20deg) 元素在X軸和Y軸上傾斜20度30度。


matrix() 方法

Rotate

matrix()方法和2D變換方法合并成一個。

matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。

OperaSafariChromeFirefoxInternet Explorer

實例

利用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 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }

 
 






轉載請保留本文網址http://www.emeias.com/qqwd/webqd/261.html
上一篇:WEB前端培訓:CSS3 文本效果
下一篇:WEB前端培訓:CSS3 3D 轉換
亚洲天堂www,天堂www网最新版资源,天堂va欧美va亚洲va好看va,天堂av在线观看免费 被同学征服的小说全集| 免费手机影院| 尤物网| 在线看黄av免费| 大香伊在线国产观看| 中国熟妇色xxxxx| 中文字幕精品一区二区三区| 强睡年轻的女老板3| 玩弄漂亮少妇高潮白浆| 欧美 国产 日产 韩国a片| 无码日韩免费看a片| 蜜芽跳转接口点击进入免费| 中小学生teeeTⅤ| 人妻系列无码专区久久五月天| 侵犯熟睡人妻动漫免费看| 欧美精品黑人粗大| 国产福利一区二区精品秒拍| 国产成人av网站网址| 天堂AV在线| 拒嫁豪门少奶奶99次出逃| 欧美30.40.50熟妇性无码| 56老熟妇乱子伦视频| 黄网站色视频大全在线观看| 大雞巴亂倫| chineseboy18帅哥飞机| 敏感巨乳教师奶水出来| 吾福利爱导航| 寂寞少妇裸体作爱视频| 草民电影网午夜无码精华| 欧美胖老太牲交大战| 亚va中文字幕无码毛片| http://www.dlstudent.com