将2D徽标成3D使用CSS？ [英] Turn 2D Logo into 3D using css?

问题描述

我想实现：我想打一个旋转的3D标志出一个2D的PNG

what I want to achieve: I want to make a rotating 3D Logo out of a 2d png.

有关旋转着，当然，我将使用CSS3 3D变换。但有一些CSS，可以给一个PNG一定的深度？像在Illustrator中采用挤压？我已经看到了你可以做的事情一样在CSS3一个3D立方体。但标志有很多曲线，我真的不知道从哪里开始实现这种效果。

For rotating, ofcourse, I will use the 3D transform from CSS3. But is there some CSS which can give a png some depth? Like in Illustrator using extrusion? I have seen you can do things like a 3d cube in CSS3. But the Logo has many curves and I really don't know where to start to achieve this effect.

有什么资源，我可以看看了吗？然而，我没有找到anyhting。

Are there any resources where I could look that up? Yet I didn't find anyhting.

最好的问候

推荐答案

我已经建立了一个CSS 3D引擎，可以加载OBJ文件。所以，你必须建立自己的徽标的3D节目，并将其导出为OBJ文件。

I've built a CSS 3D engine which can load obj files. So you have to build your logo in a 3D program and export it as obj file.

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

它也有一些缺点：只能用平面四元素的对象模型。而且它不是非常快。 （我的标志有276 div元素，这是非常消耗CPU）

It has some drawbacks: You can only use planar quad elements to model the object. And it's not very fast. (My logo has 276 div elements and it's very CPU intensive)

因此​​，如果标识不必是互动的，你最好使用GIF动画，电影或精灵动画（交互式在一定程度上）。

So if the logo don't have to be interactive you'd better use a gif animation, movie or sprite animation (interactive to some extent).

否则可以使用WebGL的（例如，JS库 http://threejs.org/ 的），其是硬件加速，可以处理很多多边形好。但你也必须建立标志在3D程序，可以导出到OBJ，3DS，FBX，CTM或混合的文件格式。 （例如 http://www.blender.org/ ）

Else you can use WebGL (for example the JS library http://threejs.org/) which is hardware accelerated and can handle much polygons well. But you also have to build the logo in a 3D program which can export to obj, 3ds, fbx, ctm or blend file format. (For example http://www.blender.org/)

例如：

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

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

这篇关于将2D徽标成3D使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！