CODEWITHSUNDEEP
javascriptcss3dcube
Ingwie Phoenix
Ingwie Phoenix

Reputation: 2983

Make a website become a real cube

I have recently found CSS/JS animations, like Meny: http://github.com/hakimel/meny Thing is, it only makes one side become off-screen. My goal is, to make a whole cube'd website.

The idea: I am using technology to create native applications using web technology. To make things look really awesome, I want to implement 3D animations. Thing is, I dont want to over-stuff my main view - so I thought about having actually five - or six, depends how possible that is - faces. Imagine that all four options of Meny are activated - Top, bottom, left, right. So when a user moves their courser to the top or any other side, they'll see one of the individual faces. The bottom one will hold a little console window. The left will hold a search. The right will hold some informations and triggers, and the top the actual menu. The center, the always-visible face, will hold the dynamically loaded content. So this way I can use the side faces to trigger AJAX calls for the main face.

How can I realize such an animated cube-like design? The sixth face, on the backside of the front face, might be a more detailed version of the console, with actual input and such...a terminal, of sorts.

The desktop technology I use is appJS. It doesnt support 3D yet, so Illt ry different technologys. Ill debug the interface itself in Safari.

Upvotes: 0

Views: 1491

Answers (1)

silverwind
silverwind

Reputation: 3927

This shouldn't be too hard to do with CSS 3D tranforms. Have a look at these:

http://desandro.github.io/3dtransforms/docs/cube.html

And a demo:

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

Upvotes: 2

Related Questions