怎麼辦等距3D CSS中

Question

我試圖做等距3D CSS中，這裏是我現在所擁有的： http://jsfiddle.net/AagGZ/1/（webkit的僅用於測試）

我基本上使用的box-shadow ，1px乘1px來創建3D效果，這對我來說似乎非常黑客。動畫時，我試圖添加1px的新圖層，所以動畫失敗（不是很好）。

是否有實現一個更好的辦法？我在css內容之前和之後想到CSS Matrix並添加了div。

這應該是一個不錯的添加到我的項目，而不是基本的功能，所以我接受這個工作不低於IE9。

感謝您的幫助。

編輯︰我重新打開這個問題，因爲你需要有一個純色背景的事實是有點問題，在過濾器之前和之後創建一個大的「invisibile」白色箭頭，並且它變得非常快，當你有網站不同部分的不同背景，或者當您想要更改另一個元素的懸停背景時。 我現在要回到我的版本並禁用動畫。 歡迎任何想法！

Answer 1

好吧，這是我已經有了，基於Duopixel的使用前後過濾器，但與實際邊界居住在前後塊，這樣，我沒有與透明度的問題。

：http://jsfiddle.net/BXUdP/65/

爲什麼我喜歡它：透明度沒有問題，工作在IE8。 雖然動畫只能在Firefox 4中運行，但有一個Chrome無法在濾鏡之前和之後進行動畫處理。但是，計劃爲下一個里程碑安排一個修復程序，因此現在它已經足夠優雅地降級了。

Answer 2

我不知道我的版本是任何比你少哈克。不過，這是一個有趣的問題，我試了一下。

http://jsfiddle.net/duopixel/5fdcj/

我的版本增加了簡單的邊界，並創造了傾斜角我以前的邊界形狀http://www.howtocreate.co.uk/tutorials/css/slopes。如果您的背景不是純色，這將不起作用。

在我看來，最乾淨的解決方案將涉及使用邊框圖片：http://www.css3.info/preview/border-image/。