Q

需要用CSS3 3D變換幫助

2011-07-12 86 views 4 likes

4

請看看這個頁面：需要用CSS3 3D變換幫助

http://www.abhi.my/lab/3D-menu.html

如果您還沒有已經猜到了，我試圖模仿新的iOS通知動畫（這是我第一次看到它），顯然，我的兩個微型div不像一個滿箱子...

任何想法我在做什麼錯在這裏...？

這是我想什麼親近：http://www.youtube.com/watch?v=pBgVbzBJqDc

2011-07-12 Abhishek

+0

大聲笑...來吧傢伙... 12意見，並沒有答案？我非常感謝喜歡和所有，但沒有建議如何我可以做得更好？ – Abhishek

+0

@BoldClock - 嘿夥計，介意讓我知道你對我的帖子做了哪些修改？ – Abhishek

+4

這裏的每個人都在幫助免費。你需要有耐心。要查看已進行了哪些編輯，您可以單擊「已編輯」旁邊的時間，查看修訂歷史記錄（在這種情況下，這是一個複製品） –

A

回答

4

你只轉化您在二維空間的元素，即使你要一個3D效果。

工作示例：
http://jsfiddle.net/mrlundis/wU296/

「底部」跨度是通過使用translate3d(x,y,z)其中y和z位於後面的「前」跨度對應於元件高度的一半（它圍繞它的中心點旋轉。）使用-webkit-transform-origin應該可以達到相同的效果。

-webkit-transform-origin也用於確保包含div在懸停時圍繞其中心點旋轉。

2011-07-12 22:33:26

+0

好的，你的例子很棒，這就是我一直在尋找的所有東西......但是你能不能多解釋一下......「底部」跨度被翻譯成所謂立方體的底部面。 '基本上是在'面孔'的位置烘焙，然後轉換容器元素（具有透視設置的那個元素？）另外，不要抱怨，但是通過應用這些類型的變換，我注意到偶爾有機會轉換不會在元素被徘徊時觸發......這是一個技術限制，還是我們錯過了在實施中的東西？ – Abhishek

+0

哦，在-webkit-transform-origin中15px是什麼？我認爲唯一被接受的價值觀是x＆y？ – Abhishek

+0

好的，完成了......我得到了或多或少的目標......我的理解情況稍微好一點，謝謝你的幫助mr_lundis，並且你已經在Demo中相應記入了......你可以導航到鏈接提供在OP中查看... :-) – Abhishek

相關問題