使用css將2D Logo變成3D嗎？

Question

我想實現的目標：我想從2d PNG中製作一個旋轉的3D徽標。

對於旋轉，當然，我將使用CSS3的3D變換。但是有沒有一些CSS可以給png一些深度？就像在Illustrator中使用擠出一樣？我看到你可以在CSS3中做一個3D立方體這樣的事情。但徽標有很多曲線，我真的不知道從哪裏開始實現這種效果。

有什麼資源可以查看嗎？然而我沒有發現任何傷害。

問候

Answer 1

我已經構建了一個可以加載obj文件的CSS 3D引擎。所以你必須在3D程序中建立你的標誌並把它作爲obj文件輸出。

實施例：http://css3d.bitworking.de/examples/example05.html

它有一些缺點：只能使用平面四邊形元件對象模型。這不是很快。 （我的標識有276個div元素，它的CPU密集度很高）

因此，如果標識不必交互，最好使用gif動畫，電影或精靈動畫（在某種程度上是交互式的）。

否則您可以使用WebGL（例如JS庫http://threejs.org/），它是硬件加速的，可以很好地處理多個多邊形。但你也必須在3D程序中建立標誌，可以導出爲obj，3ds，fbx，ctm或混合文件格式。 （例如http://www.blender.org/）

實例：

http://threejs.org/examples/#webgl_geometry_text

http://threejs.org/examples/#webgl_loader_stl

Answer 2

有 「新」 的CSS drop-shadow()過濾器：https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()

但目前還沒有一個CSS的方式來 「擠出」 2D圖形轉換爲3D。最好的辦法是製作一個已經有了這個的.png，只是出於兼容性的原因。