Alan Gresley has just created a stunning CSS demo which emulates the main effect of the Matrix movie, that is, the code flow. I've reported below the original message posted by Alan on CSS Discuss:
I have for years been smashing down barriers concerning CSS. This may have been on this mailing list or on www-style (CSS WG). I came into this realm of human endeavor just when CSS3 was starting to be implemented by Safari 2 or 3 (back in 2008). My early CSS was an attempt at creating depth of field with basic CSS2.1 or CSS3 (box-shadow was in CSS2).
I started playing with CSS animations early this year. I did some basic demos that had things moving but I kept on seeing visions of virtual 3D space. This I find exciting since it breaks the notion that things can only be perceived as happening only on a 2D plane (x and y axis) with just depth of field to create an illusion of space by z-index or normal painting order.
With CSS3 3D transforms and CSS3 animation one can create virtual 3D space my moving, scaling, skewing, rotating or translating things on the x, y and z axises (not indexes). There is also this marvelous aspect of CSS3 animation call perspective.
Below is a link to my new demo. It works in Safari, iPad or iPhone. It uses CSS3, HTML, SVGs and one PNG. If you want it to be interactive, you must enable JS. Using the controls (the only part with JS), selecting random sideways movement buttons (left, center and right) and the jump buttons quickly can result in some amazing spinning. I could use pure CSS3 animations using @keyframes to do similar but I believe the fun is being able to interact with such a demo.
Moving on, the demo.
http://css-3d.org/enter-the-matrix.htm
I will in future put demos of this nature on this domain.
Enjoy and be inspired. I can only show you the door. You're the one that has to walk through it. smile