Tunnel vision 3D CSS experiment

codepen.io

59 points·fiepw··16 comments

Open articleView on HN

Forked to see the power of SASS! http://codepen.io/imjared/pen/DhHCx

(help of: @brandon_vaughan)

Yeah, I was just gonna say this definitely should have been written with Sass.

Thanks for doing that; I forked yours to mess around with it too -- http://codepen.io/mandymcclausky/pen/fdepv

Didn't realize you could do loops in SCSS. Awesome.

Tried my hand at a version: http://codepen.io/anon/pen/ABniu

Thanks! I couldn't figure out how to do the colors in the SASS loop.

Side view: http://codepen.io/anon/peb/uqbre

I think its cooler when you run it in reverse: http://codepen.io/anon/pen/pAqgc

Change the degrees value to slow it down, too.

This one http://codepen.io/anon/pen/ctsvy set to this music (work safe | Benny Benassi Satisfaction lyrics video) http://www.youtube.com/watch?v=vks0JJMhAWI

And a last one:

http://codepen.io/anon/pen/tsjoh

There should be a seizure warning in the title... Other than that, neat little trick!

Really? I thought photosensitive epilepsy usually related to flashes at very certain frequencies.

Photosensitive epilepsy can be triggered by repeating patterns, too (stripes with a certain spacing in the visual field, for example). That's why optical illusions occasionally have epilepsy warnings attached.

Wikipedia has some reasonable information on the subject: http://en.wikipedia.org/wiki/Photosensitive_epilepsy

Sonic the Hedgehog: special tube levels. First thing that came to mind :) https://www.youtube.com/watch?v=9UfIMMS9O0o

It's amazing how much better I remember the graphics being on those levels. Memory is a funny thing.

A different perspective http://cdpn.io/pAqgc

Another perspective: http://codepen.io/anon/pen/hEkby Same, inside rings: http://codepen.io/anon/pen/KuyCf

Use HAML

.scene .warpper %ul.tunnel - 72.times do %li.ring

Reply on news.ycombinator.com