TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

CSS3 Traveling Through Space

95 pointsby zhsabout 12 years ago

14 comments

kohsukeabout 12 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!<p>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.<p>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.<p>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.
评论 #5623613 未加载
paulirishabout 12 years ago
Source image that's used: <a href="http://s.cdpn.io/18515/PIA09959-1280x800.jpg" rel="nofollow">http://s.cdpn.io/18515/PIA09959-1280x800.jpg</a> 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.<p>Full unminified CSS: <a href="http://codepen.io/noahblon/pen/GKflw" rel="nofollow">http://codepen.io/noahblon/pen/GKflw</a><p>Pretty simple.
评论 #5624583 未加载
评论 #5625391 未加载
seszettabout 12 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.
评论 #5622569 未加载
babyabout 12 years ago
Doesn't work on Firefox.
评论 #5623029 未加载
_chrismccreadieabout 12 years ago
Outstanding.I felt as if I was warping through space in Eve Online! In all seriousness, amazing demo. Well done.<p>Off-topic but interested: It doesn't display correctly in Firefox (only renders a small segment of the space warp). Why is this?
评论 #5623084 未加载
sideprojectabout 12 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!
chriscoyierabout 12 years ago
Same kinda concept to create a shelf 3D effect : <a href="http://codepen.io/chriscoyier/pen/gGiAE" rel="nofollow">http://codepen.io/chriscoyier/pen/gGiAE</a>
faramarzabout 12 years ago
You're essentially enlarging a background image while moving it at the same time right? very cool!
simpsondabout 12 years ago
Try zooming in and out. It feels like it changes the FOV.
gregorkasabout 12 years ago
Probably the bes CSS3 demo I've ever seen. Good job.
habosaabout 12 years ago
Wow that's impressive. How was this done?
评论 #5622765 未加载
Aeiperabout 12 years ago
Can you put up the link to the code?
bharathwaajabout 12 years ago
Very good work! :)
illiciumabout 12 years ago
WebKit only.