CSS3 Traveling Through Space

by zhs • 13 years ago

95 22 13 years ago

seszett• 13 years ago

It took me a while to understand, it only works in Chromium, Firefox shows a few images, maybe just a part of the animation at less than 1 fps.

manmal• 13 years ago

Works fine for me on Safari 6.0.4.

habosa• 13 years ago

Wow that's impressive. How was this done?

stuartjmoore• 13 years ago

Hint (from the CSS): http://s.cdpn.io/18515/PIA09959-1280x800.jpg

gregorkas• 13 years ago

Probably the bes CSS3 demo I've ever seen. Good job.

simpsond• 13 years ago

Try zooming in and out. It feels like it changes the FOV.

_chrismccreadie2• 13 years ago

Outstanding.I felt as if I was warping through space in Eve Online! In all seriousness, amazing demo. Well done.

Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?

Ironlink2• 13 years ago

It appears that the "wormhole" is off center. If you zoom the page, you'll notice that each step brings the tunnel closer to the center of the screen.

At zoom level 6 (counting from 100% as level zero) you are viewing from inside the tunnel, but only just. At zoom level 8 (maximum), the view is almost at the center of the tunnel.

If I had to take a guess, the page fails to calculate the center of the viewport, using (0,0) as its target coordinate; but (0,0) is top-left.

_chrismccreadie2• 13 years ago

Thank you for the explanation.

kohsuke• 13 years ago

This demo is great, so I hate to be a party pooper, but this is not how it'll look if you are actually travelling near the speed of light at all!

For example, you'd see stars concentrate more near the direction you are heading with substantial blue shift, and not a whole lot on your side.

At the subjective speed in this demo, the blue shift would be so much and the light cone so narrow that you'll probably just see one dot in the center and pitch black everything else.

I think a physically accurate depiction of how it'll actually look if you are traveling near the speed of light would be very cool.

skosch• 13 years ago

There are a bunch of cool simulations:

http://gamelab.mit.edu/games/a-slower-speed-of-light/

http://www.spacetimetravel.org/

http://realtimerelativity.org/

baby• 13 years ago

Doesn't work on Firefox.

Ironlink2• 13 years ago

It sort of works in my Firefox 20 (current stable release) if I zoom in all the way.

faramarz• 13 years ago

You're essentially enlarging a background image while moving it at the same time right? very cool!

Aeiper• 13 years ago

Can you put up the link to the code?

illicium• 13 years ago

WebKit only.

paulirish• 13 years ago

Source image that's used: http://s.cdpn.io/18515/PIA09959-1280x800.jpg It covers four rectangular walls and just shifts the Z closer and closer to you. And meanwhile does an opacity swap to a second set so it can do it infinitely.

Full unminified CSS: http://codepen.io/noahblon/pen/GKflw

Pretty simple.

notum• 13 years ago

Simple, but clever, love it. Reminds me of that old Trek debate: "If those were really stars in the warp effect you'd reach the other end of the galaxy in a couple of seconds".

noahblon• 13 years ago

Yep, Paul's got it. Only thing to add is that the perpective value on the stage is very small, making the box appear to be very long and the background image stretched out.

bharathwaaj• 13 years ago

Very good work! :)

sideproject• 13 years ago

There is an optical illusion happening as a by product of this demo! the "div" that separates the demo pane with the CSS, JS and HTML code pane looks slightly bent!

chriscoyier• 13 years ago

Same kinda concept to create a shelf 3D effect : http://codepen.io/chriscoyier/pen/gGiAE

CSS3 Traveling Through Space

Related Stories