Bonjour,
J'espere que je ne me trompe pas de section.

Voilà je cherche à réaliser cette image.
https://fr.m.wikipedia.org/wiki/Fichier:8-cell-orig.gif

Je voulais savoir comment je pouvais faire pour le réaliser, quelles technologies je devrais utiliser, etc ..?

Merci ! :)

11 réponses


MrCastor
Réponse acceptée

Salut,
Je pense que c'est tout a fait réalisable en css / js mais il va y avoir du boulot ! :)
Regarde du côté de "canvas", tu pourrais peut-être trouver ton bonheur.

Bonjour cette image est un .gif elle n'a donc aucun rapport avec CSS, HTML, ou tout autres langages web.

Gif est un format d'image comme Png, Jpg, jpeg. comme chaque format il a des avantages et des inconvénients:
en l'occurrence, gif permet de faire des images animer mais d'une qualité basse.

Pour réaliser une image gif tu peux utiliser un logiciel comme Photoshop, en cherchant sur Google, tu pourras également trouver d'autres logiciels.

J'espère avoir répondu à ta question.
Cordialement.

Grope
Auteur

Merci pour ta réponse, je sais bien que cette image est un .gif ^^
Mais je sais également qu'il est possible de réaliser des images, animations en CSS, JS.
C'est pour ca que je post ca ici ^^

Grope
Auteur

Je me doute bien que ca ne va pas etre facile ^^
Je vais regarder ca ;)
Merci pour ta réponse !

regarde aussi du coté de webgl pour ce genre d'animation, tu trouvera des exemples ici et la notement avec three.js

C'est chaud quand même ce genre d'image,
faut bac+12 en infographie + maitriser la 3d, les shader ...
c'est pas pour les Kevin qui ont arrété après la 3eme

CSS surement pas !!!
webgl si l'image est générée en temps réel
sinon je penche plutôt pour Direct3D ou OpenGl pour générer une série d'images transformées en Gif animé

La 3D est particulièrement compliquée en CSS, surtout pour ce genre de cas.
Mais contrairement à ce que t'as dis Huggy, oui c'est réalisable en css. Je ne pense même pas que tu ai besoin de javascript.
Tu dois utiliser des transform, des perspective etc, bref, c'est beaucoup beaucoup de recherche en amont.
(Si comme moi tu confond translateX et Y une fois sur deux, abandonne ^^)

Sinon, je te laisse un peu de lecture : https://24ways.org/2010/intro-to-css-3d-transforms/

Bonne chance :)

(Si comme moi tu confond translateX et Y une fois sur deux, abandonne ^^)

Ha ben je me sent moins seul!!! merci!!!!

Bah tu tournes la tête est c'est bon !!!!

Edit : je viens de voir ce n'est pas un simple cube, c'est un tesseract , un cube en "4d" si on veut.
Donc effectivement là je pense pas qu'en css se soit faisable. Le css est très puissant mais y'a des limites .

J'ai pas vu qu'on pouvait créer une structure en fil de fer avec CSS, du coup j'ai dit que ça me semblait impossible
mais je ne suis pas spécialiste et même si je l'étais il faudrait que je le sois en permanence (évolution du web oblige)
il me semble que le CSS 3D on n'en parle plus, alors qu'on en parlait à la sortie de CSS3 /HTML5