CSS中的3D變換功能

鑰匙要點

• CSS 3D變換函數允許在三個維度上操縱HTML元素：水平X軸，垂直Y軸和深度z軸。這包括rotatex（），rotatey（），rotatez（），translate3d（），translatez（），scale3d（）和perspective（）。
可以將CSS中的轉換屬性分配給一個或多個功能，以將轉換應用於元素。可以通過空間分離的函數來定義多個轉換。默認情況下，可以將轉換風格的屬性設置為公寓，以將3D定位在3D空間中。 所有現代瀏覽器都支持
• CSS 3D變換，但是有一些例外。例如，Internet Explorer不支持Transform-fansfors：Preserve-3D，因此無法創建3D場景。野生動物園需要使用供應商預裝-webkit-backface-visibility隱藏後面。 CSS 3D轉換中的透視屬性定義了對象遠離觀看者的距離，從而產生了深度的幻覺。透視長度越小，消失點越近，3D效果越明顯。
• 在本文中，我將展示如何在CSS中使用新的3D轉換功能和屬性為您的網頁和應用程序添加另一個維度。我們將研究轉換，翻譯，旋轉，縮放，透視圖等，以及與Z Index，瀏覽器Gotchas和這些功能最佳用例有關的問題。
>
• html元素可以在三個維度上轉換：

水平X軸

>

深度z軸

在二維屏幕上，考慮到Z坐標為零的表面很有用。正面的Z值將對象向您移動（在屏幕前），而負Z值將對象移開（屏幕後面）。當添加透視圖時，更遙遠的z值會導致對象完全消失。
• 在這裡有一些要注意的事情：
CSS只能在三維空間中轉換二維HTML元素。元素本身保持平坦，深度為零。可以在z平面中擴展，但這不會
• 將正方形擠入立方體。您仍然可以創建一個立方體，但需要六個元素才能使每一側面。
> CSS 3D轉換非常適合頁面效果 - 但不要指望您能夠創建下一個Minecraft或“使命召喚”。使用WebGL等技術更好地實施了複雜模型。

在所有現代瀏覽器（IE10）中，3D變換均得到很好的支持，但是：

• > Internet Explorer不支持轉換風格：Preserve-3D，這使得無法創建3D場景。
>所有版本的Safari都必須使用供應商預定的-webkit-backface-visisibility隱藏後面的面孔。所有其他瀏覽器都支持Backface-Visibil.

>以下各節描述了3D變換屬性和功能。演示頁面說明了大多數使用的方式。

>

變換屬性

任何元素都可以應用單個變換屬性。可以為其分配一個或多個參數的函數。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

如果需要兩個或多個轉換，則可以定義任何數量的空間分隔函數：>

例如，在水平平面上縮放並垂直轉換：

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

>最後，變換：無；刪除所有現有的變換。

translation（移動）函數

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

>您可能使用翻譯函數將元素水平移動沿x軸或垂直沿y軸移動：

可以使用任何長度單元。百分比參考轉換元件的大小，因此施加了翻譯（80％）的100px高塊將其降低80像素。

進入第三維，我們也可以使用Translatez：

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

給定三個元素，＃box1，＃box2和＃box3，絕對位於同一位置，translatez（-200px）應用於＃box2和translatez（-400px）應用於＃box3。結果是相當令人鼓舞的：

<span>transform: translateZ(-200px);      /* 200px 'into' the screen */
</span>

但是，如果我們旋轉整個外部#Scene容器，則Z軸變換變得更加明顯：>

速記translate3d函數允許相應地沿所有三個軸移動一個元素：

<span><span>#scene</span> {
</span>  <span>transform-style: preserve-3d;
</span>  <span>transform: rotateX(-10deg) rotateY(-10deg);
</span><span>}
</span>

>變換風格的屬性

默認情況下（始終在IE）中，變換風格設置為平坦。這表明元素的所有轉化子女都位於元素本身的平面上。換句話說，內部元素可能會應用任何變換，但它們會被壓壁到容器的平面中：

在大多數情況下，變換風格：preserve-3d;必須用於指示子元素位於3D空間中，並且容器的任何轉換都會相應地轉換。

<span>transform: translate3d(50px, 100%, 7em); /* x, y, z axis */
</span>

旋轉功能

2D旋轉（）函數實際上將元素圍繞z軸旋轉，並且與rotatez（）相同。例如：

rotatex（）繞水平軸旋轉，旋轉（）繞垂直旋轉。

> 可以在：

>中定義角度

• 轉 - 例如0.5轉彎是順時針方向的一半轉彎
• deg - 度，例如90DEG是順時針
的四分之一轉彎
• rad-弧度，例如-3.1416RAD是逆時針
的一半轉彎
• 畢業 - Gradians。一個完整的轉彎為400grad，因此-200Grad是逆時針的一半。
>

可以使用旋轉3D（）函數設置三個旋轉軸。有些令人困惑，它接受四個值，它們描述了一個向量：>

x - 表示旋轉軸的向量的x坐標（0至1）。

>
• y - 表示旋轉軸的向量的y坐標（0至1）。
z - 表示旋轉軸的向量的z坐標（0至1）。 a - 旋轉角度。正角表示順時針旋轉和負逆時針。
>數學受虐狂可以閱讀MDN的rotate3d（）的完整詳細信息。
• >
縮放（size）函數
函數scalex（）和scaley（）伸展或縮小水平和垂直平面中的元素：

scalez（）對深度平面的作用相同。在上面的示例中，變換：scalez（0.5）;因此，將每個元素之間的間距降低一半。

>

scale3d（x，y，z）函數可以在一個命令中的所有平面中應用比例。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

變換原點

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

默認情況下，將元素旋轉並圍繞其中心點縮放。可以通過設置最多三個空格分隔值的轉換原始物質來修改這一點：>

>單值語法：x原點的長度或百分比。也可以使用一個左，中心，右上，頂部或底部關鍵字，而在頂部和底部設置Y來源的中心x origent。

兩值語法：x和y起源。可以使用長度，百分比或關鍵字。

>

>三值語法：x，y和z起源。 z值只能是一個長度單元，例如PX或EM。

>

• 移動一個來源會影響其他來源的旋轉平面。例如，變換原始：左中心0；將原點移至左側邊緣的中心。這將影響rotatey（）和rotatez（）函數。
>
• 後面可見性
當元素旋轉X或Y軸旋轉超過90，但在任一方向上均小於270度時，顯示了元件的後部。後部有效地是鏡像，默認情況下可見。
• >
可以通過設置背面可視性來隱藏後部：隱藏； - 如果應用於＃box2：

backface-visibily：hidden;通常用於剪卡動畫，其中兩個元素顯示卡的正面和背面，但一次只能看到一個。

透視

上面顯示的示例不應用觀點。無論距觀眾有多遠，一個元素都會更深地移入Z平面。透視屬性默認為沒有，但可以將其設置為任何正長度。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

越小的視角長度，消失點越近，越明顯的3D效果：

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

透視化點

默認情況下，視角消失點是要轉換的元素的中心。可以通過設置透視原蛋白：x y;，where：來修改它。

x是一個關鍵字（左中的，中心或右）或相對於元素寬度的百分比（0％，50％和100％等於關鍵字）。
• > 相對於元素高度（0％，50％和100％等於關鍵字），
y是關鍵字（頂部，中心或底部）或百分比。
>左上角消失點：

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

右下角消失點：

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

>還有一個perspective（）函數 - 用於審查，轉換：透視（200px）。但是，它似乎並不尊重任何觀點。

>現在一起

最後，可以在單個Matrix3d（）函數中定義縮放，旋轉和翻譯，該函數需要三維仿射轉換的值不少於16個值。 >

>這可能是在JavaScript中使用的，並由具有幾何學學位的人嘗試！對於CSS，轉換功能的列表可能更可讀和可維護。

進一步閱讀

在概念上，在三個維度上工作可能很困難，但是CSS轉換是對像操作的更容易的途徑。演示頁面提供了一個交互式工具，該工具將幫助您了解屬性和功能如何一起工作。

>您可以找到CSS 3D轉換的驚人示例，包括虛擬現實觀眾，第一人稱射擊遊戲，圖像畫廊和星球大戰滾動文字。許多是概念驗證示範，不太可能在典型的項目中使用。但是，一些微妙的，逐漸增強的3D效果可以為您的網頁和應用程序添加另一個維度。

>

使用CSS轉換
• MDN
• > CSS轉換模塊
• > CSS 3D介紹

>有關CSS 3D變換功能的常見問題

> CSS中的基本3D轉換功能是什麼？基本功能包括rotatex（），rotatey（），rotatez（），translate3d（），translatez（），scale3d（）和perspective（）。每個功能對元素都有獨特的影響。例如，rotatex（）將元素圍繞x軸旋轉，而translatez（）沿z軸移動元素。這些函數可以組合起來創建複雜的3D變換。

> perspective（）函數如何在CSS 3D變換中起作用？

perspective（）在CSS 3D變換中函數定義對象的距離。遠離用戶。它在3D轉化的元素中產生了深度和觀點的幻想。該函數採用一個參數，這是像素中的透視值。較低的值比更高的值創造了更明顯的透視效果。

我可以在CSS中結合多個3D轉換函數嗎？這是通過在變換屬性中列出每個函數（由空間隔開）來完成的。這些功能以列出的順序應用。這使您可以通過結合旋轉，翻譯和縮放來創建複雜的3D效果。

> CSS中的2D和3D轉換之間的區別是什麼？ CSS是發生轉換的維度。 2D變換會影響X和Y軸中的元素，而3D變換也包括Z軸，為轉換增加了深度。這意味著3D變換可以在三個維度上旋轉，移動和縮放元素，從而產生更身臨其境和動態的效果。

>

>如何控制CSS 3D轉換中的後面可見性？ CSS中的後面可見性屬性控制元素的背面是否在不面對查看器時是否可見。該屬性在元素旋轉且後面變得可見的3D變換中特別有用。該屬性採用兩個值：“可見”，顯示後面和“隱藏”。 CSS 3D轉換中的轉換 - 原始屬性使您可以為轉換指定原點。默認情況下，轉換起源於元素的中心。但是，您可以使用Transform-Origin屬性將其更改為元素中的任何點。該屬性採用兩個或三個值，代表x，y和可選為z軸。

>。

>我可以動畫CSS 3D變換嗎？這使您可以創建平穩，漸進的轉換，從而增強用戶體驗。您可以使用各自的CSS屬性控制動畫的持續時間，時序函數和延遲。

>是否在所有瀏覽器中支持CSS 3D變換？

>

大多數現代瀏覽器支持CSS 3D變換。但是，最好檢查每個功能的特定瀏覽器支持，因為某些舊版本可能無法完全支持所有功能。您可以使用諸如我可以使用的工具檢查CSS 3D變換的當前瀏覽器支持。

如何使用CSS 3D變換創建3D翻轉效果？通過將rotatey（）或rotatex（）函數與過渡相結合，使用CSS 3D變換創建。旋轉函數將元素圍繞其Y或X軸翻轉，而過渡會創建翻轉動畫。您可以使用過渡 - 持續和過渡 - 插入功能的速度控制翻轉的速度和時機。

>

> CSS 3D轉換中的matrix3d（）函數是什麼？ ）CSS 3D轉換中的功能使您可以指定包含16個值的4×4轉換矩陣。此功能可以代表任何3D變換，使其成為創建複雜3D效果的強大工具。但是，使用它可能非常複雜，因為它需要對矩陣數學有深刻的了解。

>

以上是CSS中的3D變換功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！