I thought I’d share this with y’all because I’m pretty happy with it and it really shows off the possibilities you can achieve with Webflow.
I’m still blown away by the visuals every time I pick up No Man’s Sky and despite all the bad press the game’s received since it’s release, from a designer’s perspective, I personally think this game is fascinating.
Thus, I was inspired to remake the pulsing Atlas diamond from the game in full 3D using just some divs and transformations. I then turned this little project into a full remake of the game’s website homepage. to add some depth to the background, I’ve added some parallax movement based on mouse movement and I love the final product.
Last note: I’ve noticed the 3D CSS doesn’t display correctly on many browsers so I suggest you view it in Chrome.
Hi Olliepop! This is fantastic! Your octahedron is not perfectly aligned though! I’ve created all the Platonic Solids in Webflow… try creating an icosahedron, now that was a challenge! (yes, I’m showing off!) I was so impressed that I could do this with Webflow: http://webfonicsolids.webflow.io/
Yes, its a shame 3D transforms don’t work properly in other browsers. The flip cards on my site above don’t work very well in Firefox or IE.
They’re really cool Keejo! I like how you just used an image to fill the faces of your tetrahedron and octahedron, in hindsight, I should have done the same.
The problem with the octahedron from No Man’s Sky (seen on the official website HERE) is that it isn’t perfectly symmetrical, and therefore very difficult to perfectly align. I wanted to get the shape as close to the original as possible and so I just had to get the angles as accurate as I could.
Hi Ollie, you’re right… the NMS shape is a stretched out octahedron… I in no way meant to diminish your efforts! If you didn’t use images to make the triangle shapes, what did you use? if you don’t mind me asking!
I was really looking forward to NMS but PC release has not gone well. Gutted that its not multiple player either.
No worries, I created the triangular faces using a div with a full height border on the base and a half width, transparent border on the sides, a bit like this:
On the topic of NMS, I agree, the lack of multiplayer is a real disappointment, I hope they plan to add it in future updates.
That’s interesting… I would never have thought of that!
Sorry to ask another question but how did you do the little video demo? …that’s really handy to help explain stuff.
I hope they add it too. It’s amazing how MNS are keeping quiet about the lies and hype about multiplayer, hoping everyone will just forget about it. I think that’s Sony’s influence.
Yeah, my goal was originally to use the octahedron as a small loading animation and so I wanted to keep it as small as possible to minimise loading time but on hindsight, when it became part of a webpage, I should have changed it to images.
No problem, ask away! I captured my screen using a program called Bandicam and then edited it slightly in Premiere Pro and exported as a GIF.
Yeah agreed, people have looked back at interviews and the way Hello Games answered questions regarding multiplayer now seems pretty deceptive unfortunately.
Wow guys you both rock !
These demonstrations are fantastic and also show how good Webflow can be.
Thank you so much to share this with the community.
BTW @Olliepop do u also know a macintosh alternative for Bandicam ?
Thank you by advance.
Regards
I’ve created all the Platonic Solids in Webflow… try creating an icosahedron, now that was a challenge! (yes, I’m showing off!) I was so impressed that I could do this with Webflow: 