WEB前端培訓:CSS3 3D 轉換

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

摘要:3D 轉換 CSS3 允許您使用 3D 轉換來對元素進行格式化。 在本章中,您將學到其中的一些 3D 轉換方法: rotateX() rotateY() 點擊下面的元素,來查看 2D 轉換與 3D 轉換之間的不同之處: 2D rot
關鍵詞: 北大青鳥web前端

3D 轉換

CSS3 允許您使用 3D 轉換來對元素進行格式化。

在本章中,您將學到其中的一些 3D 轉換方法:

  • rotateX()
  • rotateY()

點擊下面的元素,來查看 2D 轉換與 3D 轉換之間的不同之處:

2D rotate
3D rotate


瀏覽器支持

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

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

屬性          
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

rotateX() 方法

Rotate X

rotateX()方法,圍繞其在一個給定度數X軸旋轉的元素。

OperaSafariChromeFirefoxInternet Explorer

實例

div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */ }


rotateY() 方法

Rotate Y

rotateY()方法,圍繞其在一個給定度數Y軸旋轉的元素。

OperaSafariChromeFirefoxInternet Explorer

實例

div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */ }

 
 






轉載請保留本文網址http://www.emeias.com/qqwd/webqd/262.html
上一篇:WEB前端培訓:CSS3 2D 轉換
下一篇:WEB前端培訓:HTML常用標簽及其屬性
亚洲天堂www,天堂www网最新版资源,天堂va欧美va亚洲va好看va,天堂av在线观看免费 性俄罗斯xxxxx| 国产午夜福利在线播放| 亚洲影音先锋男人资源| jessica jane中国女人| 亚洲va成无码人在线观看天堂| 国产成人福利在线视频播放| 两人在床上很污污污污的视频| 国产在沙发上午睡被强| 清纯学生脱裙子自慰| 无翼鸟漫画| 最新国产久免费视频在线观看| 贞洁人妻终于被征服| 无码天堂亚洲国产av| 天天影视网色香欲综合网| 中文日韩欧免费视频| 国产精品嫩草研究院永久网址| 日本一本道不卡av中文| 亚洲成片在线看| 免费人成网站福利院| 亚洲日本va中文字幕人妖| 久久综合国产乱子伦精品免费| av亚洲| k频道分享系统进入口| 国产重口老太和小伙| 国产亚洲精品a在线观看| 邻居三个老汉一起弄我| 免费能直接看黄的网站| 丁香五月婷婷| >jiZZ| 131高清图片大全| 老湿视频免费x看| http://www.thefashionistaspot.com