您現在的位置: 365建站網 > 365教程 > CSS3教程 > CSS3 3D 轉換

CSS3 3D 轉換

此節有 190 人學習過     參與評論

3D 轉換

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

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

  • rotateX()
  • rotateY()

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

2D 旋轉

3D 旋轉

它如何工作?

轉換是使元素改變形狀、尺寸和位置的一種效果。

您可以使用 2D 或 3D 轉換來轉換您的元素。

瀏覽器支持

屬性 瀏覽器支持
transform

Internet Explorer 10 和 Firefox 支持 3D 轉換。

Chrome 和 Safari 需要前綴 -webkit-。

Opera 仍然不支持 3D 轉換(它只支持 2D 轉換)。

rotateX() 方法

通過 rotateX() 方法,元素圍繞其 X 軸以給定的度數進行旋轉。

實例

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

親自試一試

rotateY() 旋轉

通過 rotateY() 方法,元素圍繞其 Y 軸以給定的度數進行旋轉。

實例

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

親自試一試

轉換屬性

下面的表格列出了所有的轉換屬性:

屬性 描述 CSS
transform 向元素應用 2D 或 3D 轉換。 3
transform-origin 允許你改變被轉換元素的位置。 3
transform-style 規定被嵌套元素如何在 3D 空間中顯示。 3
perspective 規定 3D 元素的透視效果。 3
perspective-origin 規定 3D 元素的底部位置。 3
backface-visibility 定義元素在不面對屏幕時是否可見。 3

2D Transform 方法

函數 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定義 3D 轉換,使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化,僅使用用于 X 軸的值。
translateY(y) 定義 3D 轉化,僅使用用于 Y 軸的值。
translateZ(z) 定義 3D 轉化,僅使用用于 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換,通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換,通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換,通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視視圖。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (190人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 抖音奶片故意走漏视频7028| 日日拍夜夜嗷嗷叫|日日摸| 欧美午夜不卡在线观看| 又污又爽又黄的网站| 五月小说| piss厕所撒尿1wc女厕所| 欧美黑人肉体狂欢交换大派对| 处女开苞小说口述| ...国产人成视频在线视频| freefornvideos性欧洲| 国产精品日韩专区第一页| 亚洲av永久无码天堂网| 免费特级黄毛片试看| 女人被狂躁的视频免费| 色欲人妻综合网| 无码在线超碰| 免费无码av一区二区| 无码午夜福利视频1000集0855| 天堂网av| 在线观看有码制服中文| 日月拍天天拍视频在线观看| 亚洲综合小说专区图片| 秋霞在线| japanesetube学生老师| 风韵饥渴的中年富婆偷人视频| 欧洲美女与动交z0z0z| 2828手机观看免费| 女人18毛片| 手机看黄av免费网址| 免费不卡在线观看视频| 一本大道道香蕉a| http://www.exilox.com