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在线观看免费 欧美日韩在线无码一区| 欧美a级在线现免费观看| 菠萝菠萝蜜在线观看| 中文字幕韩国三级理论| chinese男美团外卖同性视频| 多人疯狂做人爱视频| 精品精品国产理论在线观看| 亚洲日韩av天天影视综合网| 妈妈的朋友在线播放| 欧美成人无码免费视频在线| 欧美牲av欧aa片欧美精品| 女人18毛片水真多| 亚洲av无码不卡在线播放| 我和公大货车上发生了性关系| av免费网站不卡观看| 穿着裙子在野战| 邪恶动态图| 美女把腿张开让男人桶视频| 公园偷拍女露底没内裤| 第九色区av天堂| 在线无码视频观看草草视频| 狠狠噜天天噜日日噜色综合| 香港三日本三级少妇三级99| 日本熟妇乱子a片| 中文字幕无码A片久久东京热| 日本护士做爰视频| 男人放进女人阳道免费12视频| 日日噜噜夜夜狠狠视频免费| 在线看高h猛烈失禁潮喷| 伊人9在线观看免费观看| 久久综合九色综合97| http://www.yakumo-tatsu.com