Unfolding The Box - CSS 3D Transforms in the Box Model (opens in new tab)

(rupl.github.io)

157 pointswittyphrasehere12y ago30 comments

30 comments

RRRA12y ago

Am I the only one with nothing on the slinky/spiral slide? Otherwise: Awesome!

rupl12y ago

This was originally a presentation aid and as such I only fully tested it in Chrome on a projector at 1280x960. I would like to keep improving the FF support in my spare time, and PRs are also welcome ;)

rupl12y ago

The flood of HN traffic motivated me to sit down and squash a bunch of bugs tonight. Should look much better in Firefox now, including a visible slinky!

iconjack12y ago

Chrome here and I couldn't see the slinky either.

shmerl12y ago

It worked perfectly for me in Firefox.

UPDATE: Ah, I see you fixed some bugs since the above comment.

rupl12y ago

If you'd like to see the slinky in isolation, I've got a page up that has better compatibility: http://css3playground.com/slinky/

lingben12y ago

same here nothing shows on firefox but that is a small issue

the demo is extremely well done!

gcb012y ago

lucky you. i got a huge computer hang on my Iceweasel (firefox 17) with a beefy CPU but crapy 3d accel.

Performance was fine in chromium.

ultimatedelman12y ago

awesome demo. very informative and useful for any level of dev

anonfunction12y ago

This is very very impressive and a great way to grok.

nawitus12y ago

Doesn't work on either Firefox or Chrome for me.

alexcroox12y ago

Works fine on FF except the slinky, and all of it works on Chrome for me. OSX

nawitus12y ago

Ah, I thought you could just scroll the content and using the keyboard was optional. The site works after all.

gcb012y ago

Works even on my old firefox build in debian.

shmerl12y ago

Very nice but pretty CPU intensive presentation :)

donrhummy12y ago

If only every browser implemented it...but IE 7,8,9 are stuck on the old APIs. They're a large percentage of all users.

ultimatedelman12y ago

actually...

IE7: 0.5% worldwide

IE8: 8.65% worldwide

IE9: 5.29% worldwide

http://gs.statcounter.com/#browser_version_partially_combine...

joseph_cooney12y ago

Depends on your demographic. 20% of our site visitors use IE8 :-(.

Cthulhu_12y ago

The real question is whether you want to invest the time needed to create a fallback for those users. Websites that use the new CSS things as a primary thing (like this presentation) won't work, but sites where the newfangled CSS things are used just as embellishment - dropdowns, sliding menus, spinners, you name it - will remain functional, just not as pretty.

tl;dr graceful degradation / enhancement.

ins42912y ago

It says css 3d, which those browsers doesn't support.

ale55andro12y ago

Good stuff if even as visual reference material as to some of the awesome possibilities CSS 3D brings. Love it!

Kiro12y ago

Doesn't work at all on the Android Stock Browser but commenting so I can check it out tomorrow at work.

ahlatimer12y ago

OT, but if you upvote an article, it gets saved into your "saved stories". You can find the link on your profile if you click your username in the URH corner.

Your "saved stories" URL would be https://news.ycombinator.com/saved?id=Kiro

Kiro12y ago

Thanks, didn't know that!

Grue312y ago

Doesn't work on latest Firefox/Windows.

gopher112y ago

Nicely done! Easy to understand.

nej12y ago

This is beautiful, great job.

bowerbird12y ago

awesome. totally brilliant. it's rare that something absolutely knocks my socks off, but i'm sitting here in my bare feet, wondering what the heck happened...

this is gonna take some time to digest, but thank you, thank you so much, for doing something so outrageous...

-bowerbird

jonhmchan12y ago

Excellent work here!

niix12y ago

I CAN'T SEE SHIT!

j / k navigate · click thread line to collapse

30 comments

RRRA12y ago

Am I the only one with nothing on the slinky/spiral slide? Otherwise: Awesome!

rupl12y ago

The flood of HN traffic motivated me to sit down and squash a bunch of bugs tonight. Should look much better in Firefox now, including a visible slinky!

iconjack12y ago

Chrome here and I couldn't see the slinky either.

shmerl12y ago

It worked perfectly for me in Firefox.

UPDATE: Ah, I see you fixed some bugs since the above comment.

rupl12y ago

If you'd like to see the slinky in isolation, I've got a page up that has better compatibility: http://css3playground.com/slinky/

lingben12y ago

same here nothing shows on firefox but that is a small issue

the demo is extremely well done!

gcb012y ago

lucky you. i got a huge computer hang on my Iceweasel (firefox 17) with a beefy CPU but crapy 3d accel.

Performance was fine in chromium.

ultimatedelman12y ago

awesome demo. very informative and useful for any level of dev

anonfunction12y ago

This is very very impressive and a great way to grok.

nawitus12y ago

Doesn't work on either Firefox or Chrome for me.

alexcroox12y ago

Works fine on FF except the slinky, and all of it works on Chrome for me. OSX

nawitus12y ago

Ah, I thought you could just scroll the content and using the keyboard was optional. The site works after all.

gcb012y ago

Works even on my old firefox build in debian.

shmerl12y ago

Very nice but pretty CPU intensive presentation :)

donrhummy12y ago

If only every browser implemented it...but IE 7,8,9 are stuck on the old APIs. They're a large percentage of all users.

ultimatedelman12y ago

actually...

IE7: 0.5% worldwide

IE8: 8.65% worldwide

IE9: 5.29% worldwide

http://gs.statcounter.com/#browser_version_partially_combine...

joseph_cooney12y ago

Depends on your demographic. 20% of our site visitors use IE8 :-(.

Cthulhu_12y ago

tl;dr graceful degradation / enhancement.

ins42912y ago

It says css 3d, which those browsers doesn't support.

ale55andro12y ago

Good stuff if even as visual reference material as to some of the awesome possibilities CSS 3D brings. Love it!

Kiro12y ago

Doesn't work at all on the Android Stock Browser but commenting so I can check it out tomorrow at work.

ahlatimer12y ago

OT, but if you upvote an article, it gets saved into your "saved stories". You can find the link on your profile if you click your username in the URH corner.

Your "saved stories" URL would be https://news.ycombinator.com/saved?id=Kiro

Kiro12y ago

Thanks, didn't know that!

Grue312y ago

Doesn't work on latest Firefox/Windows.

gopher112y ago

Nicely done! Easy to understand.

nej12y ago

This is beautiful, great job.

bowerbird12y ago

awesome. totally brilliant. it's rare that something absolutely knocks my socks off, but i'm sitting here in my bare feet, wondering what the heck happened...

this is gonna take some time to digest, but thank you, thank you so much, for doing something so outrageous...

-bowerbird

jonhmchan12y ago

Excellent work here!

niix12y ago

I CAN'T SEE SHIT!

j / k navigate · click thread line to collapse