將html元素轉換爲z平面時的像素是什麼？

我熟悉position: relative;和無單位z-index: 10;移動的東西，我認爲z-index是無秩序的。不過，我剛剛得知transform，特別是其translate3d功能：將html元素轉換爲z平面時的像素是什麼？

transform: translate3d(0px,0px,10px);

我感到困惑的是translate3d接受第三個參數的像素，因爲在Z方向沒有像素。將html元素轉換爲z平面時的像素是什麼，爲什麼它們比無單位值更有用？

來源

2016-09-06 adamdport

正面z翻譯的每個像素使元素靠近你一個像素（實際上，放大它），而不改變元素相對於其他元素的分層順序。

z-index(documentation)值是整數值，用於確定不同元素相互堆疊的方式。

在translate3d(tx, ty, tz)(documentation)的tz值，像tx和ty值，對於其z-index層內移動在三維空間中元件的平移矢量。積極的tz會將元素移向您，而負tz會將元素從您身邊移開。

你可以認爲tz Z平面翻譯爲scale()(documentation)表弟（使用無單位值，其中「2」是「雙」）：它「放大」的元素，並不會影響z-index層次順序。

來源

2016-09-06 17:40:46 henry

只能說z翻譯隻影響規模嗎？對於相同的效果，它只是一種不同的語法？我剛纔看到「計算」式樣顯示出一個'matrix3d'屬性，而不是我設置的'transform3d'屬性... – adamdport

近乎：你可以說z翻譯影響比例，外行術語，但不是'scale（） '，css屬性。 'translate3d（0,0，≠0）'的結果與'scale（≠0）'類似，但實際上並不是一回事：'translate3d（）'模擬將元素移向你或離開（'）'實際上會縮放它 - 大概底層的計算是不同的 – henry

值得注意的是'translate3d（）'和'scale（）'可能會影響清晰度，例如'translate3d（） '已知會使webkit中的文本變得模糊（大量的SO和谷歌搜索結果） – henry

將html元素轉換爲z平面時的像素是什麼？

回答

相關問題