數學幫助僞3D在HTML

然而，我的缸是胖多了，比焦炭更廣泛的可以，我不得不通過使用CSS的一個很好看實現3D效果，並且似乎手動輸入背景位置偏移以實現期望的效果。

它通過較大的數量偏移較小段落標籤的背景（到罐的外側）來工作，但偏移向着中間移動時變小。

隨着我的氣缸有一個更寬的機身（和更多的段落標籤），我認爲會有一些「適當」的計算可以完成，而不是手動播放數字。

有沒有人有任何想法如何正確計算背景偏移，因爲他們走向圓筒的邊緣？

編輯： CSS3 3D變換不上牌，因此複製焦炭例如

2013-06-03 Mark

見http://www.w3schools.com/css3/css3_3dtransforms.asp的3D變換。 – user1929959

對不起，應該提到CSS3 3D轉換不在卡片上，因此希望複製可樂示例 – Mark

但是，請看http://24ways.org/2010/intro-to-css-3d-transforms/ – user1929959

那麼的渴望，你必須從氣缸到平面上的投影。由於y維是一致的，我們只關心計算x維。

對於給定的x，你需要得到背景的x座標是什麼，它圍繞一個圓圈。如果r是半徑或圓，對於角度a，投影的x座標是rcos（a）。如果a以弧度表示，則背景的座標是r a。這意味着對於x座標（在平面中），背景座標是acos（x/r）。

，你需要正確設置的背景對於給定的X所述數據是所述偏移，等等ACOS（X/R）-X。

現在，在電子表格中，將列中的所有x值從0設置爲r。在b欄中，輸入公式acos（x/r）-x。

現在，最後一步，優化：所有具有相同值的行可以共享相同的跨度，因此爲它們創建一個單獨的div。

希望我succeded解釋這一點，這是不容易:-)

2013-06-04 19:37:22 vals

這是一個很好的開始，感謝vals，我會在電子表格中發表意見並讓你知道:) – Mark

回答