TranslateZ百分比CSS 3D轉換的

Question

當我嘗試設置百分比在translateZ這樣的：

transform:translateZ(-100%); 

這是行不通的。它也不適用於相對於視口vh或vw。有沒有辦法做到這一點？我明白我可以簡單地用JavaScript來設置它，但是我在某個類中包含了很多這樣的元素，其中包括隨後用JavaScript動態添加的元素。在CSS中做一些事情會更方便。我看到了一些看起來像重複的東西，但我想要一種不需要多個元素來修復它的方法。除了追加<style>元素，也就是

Answer 1

那麼，讀取translateZ的w3c規範，目前還不清楚有沒有人想過應該在哪裏做一個百分比值..（或者至少對我而言並不清楚應該是什麼實施）。

然而，標準中已經確定的是translateX（100％）將與寬度有關。

因此，一種方式來獲得你想要將旋轉，直到x軸Z軸，做斧翻譯，並恢復旋轉什麼：

CSS

transform: rotateY(-90deg) translateX(100%) rotateY(90deg); 

在這demo您可以看到，已應用該變換的測試元素獲得與應用translateZ（100px）的ref元素相同的位置（因爲元素寬度爲100px）