3D Restaurant Menu Concept

Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. Mary Lou has experimented with some simple concepts for restaurant websites and came up with a 3D folded menu (a real menu, not a “web” menu). The result is a restaurant website template where the menu will open by unfolding. Clicking the linked items will reveal a modal overlay which contains some more info. Since this flyer structure requires a decent amount of space, and, although she will make this responsive, she’ll add a media query for smaller screens where everything will fall back to a simplified stacked structure. The same will be applied for browsers that don’t support 3D transforms.

The structure will consist of a main container with the class “rm-container” and Mary Lou will have a wrapper inside. The wrapper will contain the three panels. Initially, she only want to see the cover of the folded menu; that is the division with the class “rm-cover”. The last panel is the one with the class “rm-right”. The middle panel is the one you will see in the middle when you open the menu. Inside of the rm-cover and the rm-right division, she will have a front- and a backface. Mary Lou will also add an element for an overlay gradient that will give the menu parts a bit more realism. Note that the front will be empty in the last element. The middle part of the menu will simply have another wrapper inside, no front or back part.