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在线观看免费 外国性爱视频| 国模欢欢炮交啪啪150| 被公侵犯玩弄漂亮人妻| 波多野结衣视频| 法国a级情欲片| 国产成人av电影在线观看第一页| 寂寞少妇裸体作爱视频| 欧美精品18videosex性欧美| 近親相姦中文字幕在线| 国产成人亚洲综合色婷婷| japanese学生高潮| 中文字幕在线手机播放| 国产普通话刺激视频在线播放| 暖暖的日本高清免费版| 日本无卡码高清免费v| 午夜神器18以下不能进免费| 免费乱伦小说| 久草免费福利资源站在线观看| 疯狂的交换女友第一部| 狠狠色噜噜狠狠狠狠97| 欧美ava最美女演员| 欧美乱码伦视频免费| 国产精品偷伦视频观看免费| old woman| 一本道dvd手机在线观看| 成年永久免费播放平台| av女优的贴吧有哪些| 无码高清中字av| 老鸭窝在线视频| 少妇无码一区二区三区| 国产成人拍拍拍高潮尖叫| http://www.trowjs.com