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.cpnradio.com/qqwd/webqd/261.html
上一篇:WEB前端培訓:CSS3 文本效果
下一篇:WEB前端培訓:CSS3 3D 轉換
人妻 清高 无码 中文字幕