?

Log in

No account? Create an account

Previous Entry | Next Entry

http://www.brothercake.com/site/resources/reference/3d/

http://tantek.com/CSS/Examples/polygons.html

Brothercake writes:

Turn the clock forwards to 2006, and for no particular reason, I remembered all this. Pretty soon my mind had come round to wondering whether it could be re-done, without using images or vector formats, use Tantek's technique of creating shapes out of the interaction of CSS borders.

If an element has a very thick border (say, 50 pixels), and co-inciding borders are different colors (say, red on the left and blue on the top), then the intersection of those borders creates a diagonal line (fig1).
Figure 2
By varying the relative border-widths, different angles can be created; and by using "transparent" as one of the border colors, the diagonals can run against transparency (fig2).
Figure 3
So finally, wrapping another element around the first, and then using CSS clip on the outer element so that only a corner of the inner element is exposed, we can effectively create a right-angled triangle of any size, with a choice of four orientations (depending on the outer clip), and with transparency on all three sides (fig3).

Once we can do that, it's simply a case of working out how many to make and where to position them, and then we can indeed create 3D perspective drawings using CSS alone! But of course that's still a lot of calculation - nobody wants to sit there working out the lines involved in all those different views - so in steps the DOM!

Another 3D drawing of an underground corridor, an identical view to the previous, but here the depth and sense of 3D is more realistic. And with a little math and some judicious JavaScript, we can end up producing something much better than the original: the wall slices are computed on the fly to give a far more accurate and controllable perspective, colors are progressively shaded to give a better sense of depth, and the bordering onto transparency allows for image textures to be used to make attractive floors and ceilings.

And all done without tedium! The viewer's input data is a 2D dungeon floor plan, and each 3D view is created on demand. This makes it quick and easy to create very large dungeon areas, and also means that details of the visual output - such as the shading and depth of perspective - can be edited and fine-tuned over time.

Comments