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.cpnradio.com/qqwd/webqd/262.html
上一篇:WEB前端培訓:CSS3 2D 轉換
下一篇:WEB前端培訓:HTML常用標簽及其屬性
人妻 清高 无码 中文字幕