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.venture-express.com/qqwd/webqd/261.html
上一篇:WEB前端培訓:CSS3 文本效果
下一篇:WEB前端培訓:CSS3 3D 轉換
日本强伦姧人妻久久,中日韩中文字幕无码一本,日本强伦姧护士在线观看 japanese在线播放国产| 国产成人剧情av麻豆映画| 我年轻漂亮的继坶2| 中文字幕mv在线观看| 开心激情五月天| free18中国| 观看欧美大片毛大片| jk制服爆乳裸体自慰流水| 国产成人免费无庶挡视频| 全班女同学吸我的精子| 女人与公拘交200部| >iavbobo| 成·人免费午夜无码视频蜜芽| 欧美自拍另类欧美综合图片区| 青青在线播放观看| 杨幂真紧好爽全文阅读| 一级a做爰片免费观看高清| 两个黑人挺进校花体内np| 国产成人8x人网站视频| 福利100合集 在线播放| 亚洲精品无码久久| 精品国产高清在线看国产毛片| 无码视频a片免费看| 男女啪啪第99期动态图| 求求你不要再往里面塞东西了| 夜鲁夜鲁夜鲁视频在线观看| 男女真人牲交a做片大尺度| 久九九久视频精品免费| 国产三级视频在线播放线观看| 少妇性俱乐部纵欲狂欢电影| 御宅屋 自由小说阅读网最新地址| http://www.glasscv.com