Hello all,
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.
http://css-3d.org/
Enjoy and be inspired. I can only show you the door. You're the one that
has to walk through it. :-)
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
