CSS中的3D變換功能-css教學-PHP中文網

鑰匙要點

透視

透視化點

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

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

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

首頁

web前端

css教學

CSS中的3D變換功能

William Shakespeare

Feb 15, 2025 am 10:15 AM

CSS中的3D變換功能

鑰匙要點

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

水平X軸

深度z軸

在這裡有一些要注意的事情：

將正方形擠入立方體。您仍然可以創建一個立方體，但需要六個元素才能使每一側面。

> CSS 3D轉換非常適合頁面效果 - 但不要指望您能夠創建下一個Minecraft或“使命召喚”。使用WebGL等技術更好地實施了複雜模型。

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

> Internet Explorer不支持轉換風格：Preserve-3D，這使得無法創建3D場景。

>以下各節描述了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軸變換變得更加明顯：>

CSS中的3D變換功能

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

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

登入後複製

>變換風格的屬性

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

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

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

登入後複製

旋轉功能

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

CSS中的3D變換功能

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

> 可以在：

>中定義角度

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

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

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

y - 表示旋轉軸的向量的y坐標（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>

登入後複製

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

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

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

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

移動一個來源會影響其他來源的旋轉平面。例如，變換原始：左中心0；將原點移至左側邊緣的中心。這將影響rotatey（）和rotatez（）函數。
後面可見性
>

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

透視

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

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

登入後複製

CSS中的3D變換功能

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

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

登入後複製

CSS中的3D變換功能

透視化點

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

> 相對於元素高度（0％，50％和100％等於關鍵字），

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

登入後複製

CSS中的3D變換功能右下角消失點：

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

登入後複製

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

>現在一起

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

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

進一步閱讀

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

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

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軸。

>。