Transformez le logo 2D en 3D en utilisant css?

Question

ce que je veux réaliser: je veux créer un logo 3D rotatif sur un png 2d.

Pour la rotation, bien sûr, je vais utiliser la transformation 3D de CSS3. Mais y a-t-il du CSS qui peut donner un peu de profondeur? Comme dans Illustrator utilisant l'extrusion? J'ai vu que vous pouvez faire des choses comme un cube 3D en CSS3. Mais le logo a beaucoup de courbes et je ne sais vraiment pas par où commencer pour obtenir cet effet.

Y a-t-il des ressources où je pourrais chercher ça? Pourtant, je n'ai rien trouvé.

Meilleures salutations

Answer 1

J'ai construit un moteur CSS CSS capable de charger des fichiers obj. Vous devez donc créer votre logo dans un programme 3D et l'exporter en tant que fichier obj.

Exemple: http://css3d.bitworking.de/examples/example05.html

Il a quelques inconvénients: Vous ne pouvez utiliser des éléments de quad plans pour modéliser l'objet. Et ce n'est pas très rapide. Donc, si le logo ne doit pas être interactif, il vaut mieux utiliser une animation gif, une animation de film ou d'image-objet (interactive dans une certaine mesure).

Sinon vous pouvez utiliser WebGL (par exemple la bibliothèque JS http://threejs.org/) qui est accélérée matériellement et peut gérer beaucoup de polygones. Mais vous devez également construire le logo dans un programme 3D qui peut exporter vers obj, 3ds, fbx, ctm ou mélanger le format de fichier. (Par exemple http://www.blender.org/)

Exemples:

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

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

Answer 2

Il y a le "nouveau" drop-shadow() filtre: css https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()

Mais il n'y a pas un moyen CSS à "extruder" formes 2D en 3D. Votre meilleur pari est de faire un .png qui a déjà ceci, si seulement pour des raisons de compatibilité.