柚子快報(bào)激活碼778899分享：[CSS]CSS3 3D 轉(zhuǎn)換
柚子快報(bào)激活碼778899分享：[CSS]CSS3 3D 轉(zhuǎn)換
3D 轉(zhuǎn)換
CSS3 允許您使用 3D 轉(zhuǎn)換來對(duì)元素進(jìn)行格式化。
在本章中，您將學(xué)到其中的一些 3D 轉(zhuǎn)換方法：
rotateX()rotateY()
點(diǎn)擊下面的元素，來查看 2D 轉(zhuǎn)換與 3D 轉(zhuǎn)換之間的不同之處：
2D rotate
3D rotate
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。
屬性transform36.0 12.0?-webkit-10.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-transform-origin (three-value syntax)36.0 12.0?-webkit-10.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-transform-style36.0 12.0?-webkit-11.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-perspective36.0 12.0?-webkit-10.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-perspective-origin36.0 12.0?-webkit-10.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-backface-visibility36.0 12.0?-webkit-10.016.0 10.0?-moz-4.0?-webkit-23.0 15.0?-webkit-
rotateX() 方法
rotateX()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。
實(shí)例
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 與 Chrome */ }
嘗試一下 ?
rotateY() 方法
rotateY()方法，圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。
實(shí)例
div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 與 Chrome */ }
嘗試一下 ?
轉(zhuǎn)換屬性
下表列出了所有的轉(zhuǎn)換屬性：
屬性描述CSStransform向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。3transform-origin允許你改變被轉(zhuǎn)換元素的位置。3transform-style規(guī)定被嵌套元素如何在 3D 空間中顯示。3perspective規(guī)定 3D 元素的透視效果。3perspective-origin規(guī)定 3D 元素的底部位置。3backface-visibility定義元素在不面對(duì)屏幕時(shí)是否可見。3
3D 轉(zhuǎn)換方法
函數(shù)描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。translate3d(x,y,z)定義 3D 轉(zhuǎn)化。translateX(x)定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。translateY(y)定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。translateZ(z)定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換。scaleX(x)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) X 軸的值。scaleY(y)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Y 軸的值。scaleZ(z)定義 3D 縮放轉(zhuǎn)換，通過給定一個(gè) Z 軸的值。rotate3d(x,y,z,angle)定義 3D 旋轉(zhuǎn)。rotateX(angle)定義沿 X 軸的 3D 旋轉(zhuǎn)。rotateY(angle)定義沿 Y 軸的 3D 旋轉(zhuǎn)。rotateZ(angle)定義沿 Z 軸的 3D 旋轉(zhuǎn)。perspective(n)定義 3D 轉(zhuǎn)換元素的透視視圖。
柚子快報(bào)激活碼778899分享：[CSS]CSS3 3D 轉(zhuǎn)換
相關(guān)文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Zalando鞋履風(fēng)尚
