8 ms·

Amazing CSS3 3D popup book

133 points by mikebridgman 14y ago

jawr 14y ago
doesn't work under Chrome Version 20.0.1132.57 :(
- valuegram 14y ago
  works in Chrome 21.0.1180.79 beta-m
- tseabrooks 14y ago
  I find it interesting that this works, or doesn't. Based on these "Micro-Version" differences as well as whole version differences. What are the key differences? Is it actually chrome or some other system level difference? Chrome Version 21.0.1180.79 works for me.
  - paulirish 14y ago
    3D transforms is nearly completely dependent on the GPU of your machine. about:gpu in Chrome will give you more information about the differences and capabilities of your machine. In some cases, old drivers are too unstable to support and so they're blacklisted by Chrome.
    - deleted 14y ago
      [deleted]
    - hazelnut 14y ago
      hm, so you have to check the GPU via JS to check if the user can handle 3D transforms? about:gpu is nice. thanks.
      - lotyrin 14y ago
        The browser does to decide if it's safe to use them. JS should be able to just use feature detection.
    - nilliams 14y ago
      Gah this helped me a lot, thanks. about:gpu told me my WebGL was disabled in about:flags... which it was. Not sure how that happened as that's been annoying me forever.
- rnernento 14y ago
  Working great in : Chrome 21.0.1180.79 m
- Turing_Machine 14y ago
  Okay in 21.0.1180.75 (OS X).
- tayl0r 14y ago
  Why would you be running Chrome version 20? Just restart your browser.
  - da_n 14y ago
    Had exact same question, why would someone purposely disable/prevent the auto-update mechanism?
- FlukeATX 14y ago
  Version 21.0.1180.79, doesn't work for me either.
- hamxiaoz 14y ago
  hmmm, mine works fine: Chrome Version 20.0.1132.57m win7
- mparlane 14y ago
  Follow these instructions: http://news.ycombinator.com/item?id=4393135 http://news.ycombinator.com/item?id=4393135
atirip 14y ago
Immediately crashes iPad Safari :-(
- hnriot 14y ago
  Not for me, ipad3 here and it worked fine
  - huntaub 14y ago
    It worked for me on iOS 6. I can't speak for earlier versions.
  - city41 14y ago
    It even works fine on my iPad 1
- Samuel_Michon 14y ago
  Works fine on my iPad 2, iOS 5.1.1.
dazzawazza 14y ago
There seems to be quite a lot of Javascript in there as well :) Really nice design. BTW: works fine in Safari 6.0 OSX
Narretz 14y ago
works "meh" in firefox 14.01. You can browser, but it stutters and you don't see the nice pop-up effect. It just appears when the page is turned far enough.
rnernento 14y ago
Really cool design, I love seeing seamless in browser 3D, can't wait till this is the norm.
jack-r-abbit 14y ago
While the overall graphics and the general mechanism looks decent, the actual action of turning a page if very kludgy and glitchy. I found it difficult to get the pages completely turned since the book kept rotating a bit.
- city41 14y ago
  What browser/OS are you using? For me in Chrome/OSX, the pages turn flawlessly.
  - jack-r-abbit 14y ago
    Chromium-based RockMelt 0.16.91.something (on Win7)
- jdonaldson 14y ago
  Another tiny nit: They don't need those "+" icon interactions. They could've just used the book rotation controls as-is. Popup books usually don't have buttons, at least not from my generation /getoffmylawn.
dave_sullivan 14y ago
So I'll get down voted for this but it needs to be said: this is very cool and is a great proof of concept for the direction things are going. However, if you're promoting a commercial product, event, etc., you could have just used flash--it would be trivialish to implement, perform better, and have no cross browser issues--although no iOS to be fair... As it stands, how many people will hit the site, see it's not working because they have the wrong browser version, and leave?
- mikebridgman 14y ago
  One thing to consider is that their target audience is attendees of the Front-trends conference, a conference specifically for front end developers. I think it's a safe bet that a majority of the traffic will have a compatible browser.
  - dave_sullivan 14y ago
    Ha, excellent point. Judging by some of the comments here, much of their traffic may not have a compatible browser version after all, but I'd imagine that they still have a higher tolerance for that sort of thing in the name of advancing the field.
- ceejayoz 14y ago
  > and have no cross browser issues--although no iOS to be fair... I love this casual dismissal of tablet/mobile phone users as if it were a non-issue.
  - Livven 14y ago
    Umm... as if that animation even worked on iOS or Android browsers...
    - Gormo 14y ago
      Worked fine for me on iPad Safari.
    - 14y ago
RandallBrown 14y ago
Seems like they should have some sort of fallback to users of IE can at least get some information about the conference Very neat effect though. Is this based on actual folding math or is it just a series of neat animations? Like could this be built into a sort of popup book framework?
- ralfn 14y ago
  You only need a fallback for IE if your audience uses IE
fpp 14y ago
not working in Chrome Version 21.0.1180.77 on Linux
- ThePinion 14y ago
  I'm on chromium 22 on linux. Maybe you need to go to the about:flags page and enable "override software rendering list" for your browser to use the proper acceleration on the page. That's what I had to do for my old Inspiron 1545.
sahat 14y ago
Works smoothly on Safari 6.0 (8536.25) in Mountain Lion 10.8.
sray 14y ago
This is, to use a word I never use, delightful! Great concept, whimsical design, and wonderful execution. Well done! Now, if I could only stop flipping the pages and get back to work...
thomasfl 14y ago
Hey you polish frontend hackers! Nice work!
mparlane 14y ago
"Boo! It looks like your browser doesn't support 3D transforms." Latest Chrome on Centos6 using a ssh socks proxy. edit: solved thanks to http://news.ycombinator.com/item?id=4393135 http://news.ycombinator.com/item?id=4393135
imjared 14y ago
I worked with the guys who built this (we're a DC design studio) and can tell you that it doesn't gracefully degrade simply because it's not supposed to. As some people grasped, this was for a frontend conference where everyone would be expected to be running the latest and greatest browser. There's no guarantee it will work on your setup but when it does, it's a cool experience. Followup on how it was built here: http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/ http://coding.smashingmagazine.com/2012/04/17/beercamp-an-ex... Full repo here: https://github.com/nclud/2012.beercamp.com https://github.com/nclud/2012.beercamp.com

133 points by mikebridgman 14y ago

jawr 14y ago

doesn't work under Chrome Version 20.0.1132.57 :(

valuegram 14y ago
works in Chrome 21.0.1180.79 beta-m
tseabrooks 14y ago
I find it interesting that this works, or doesn't. Based on these "Micro-Version" differences as well as whole version differences. What are the key differences? Is it actually chrome or some other system level difference? Chrome Version 21.0.1180.79 works for me.
- paulirish 14y ago
  3D transforms is nearly completely dependent on the GPU of your machine. about:gpu in Chrome will give you more information about the differences and capabilities of your machine. In some cases, old drivers are too unstable to support and so they're blacklisted by Chrome.
  - deleted 14y ago
    [deleted]
  - hazelnut 14y ago
    hm, so you have to check the GPU via JS to check if the user can handle 3D transforms? about:gpu is nice. thanks.
    - lotyrin 14y ago
      The browser does to decide if it's safe to use them. JS should be able to just use feature detection.
  - nilliams 14y ago
    Gah this helped me a lot, thanks. about:gpu told me my WebGL was disabled in about:flags... which it was. Not sure how that happened as that's been annoying me forever.
rnernento 14y ago
Working great in : Chrome 21.0.1180.79 m
Turing_Machine 14y ago
Okay in 21.0.1180.75 (OS X).
tayl0r 14y ago
Why would you be running Chrome version 20? Just restart your browser.
- da_n 14y ago
  Had exact same question, why would someone purposely disable/prevent the auto-update mechanism?
FlukeATX 14y ago
Version 21.0.1180.79, doesn't work for me either.
hamxiaoz 14y ago
hmmm, mine works fine: Chrome Version 20.0.1132.57m win7
mparlane 14y ago
Follow these instructions: http://news.ycombinator.com/item?id=4393135 http://news.ycombinator.com/item?id=4393135

atirip 14y ago

Immediately crashes iPad Safari :-(

hnriot 14y ago
Not for me, ipad3 here and it worked fine
- huntaub 14y ago
  It worked for me on iOS 6. I can't speak for earlier versions.
- city41 14y ago
  It even works fine on my iPad 1
Samuel_Michon 14y ago
Works fine on my iPad 2, iOS 5.1.1.

dazzawazza 14y ago

There seems to be quite a lot of Javascript in there as well :) Really nice design. BTW: works fine in Safari 6.0 OSX

Narretz 14y ago

works "meh" in firefox 14.01. You can browser, but it stutters and you don't see the nice pop-up effect. It just appears when the page is turned far enough.

rnernento 14y ago

Really cool design, I love seeing seamless in browser 3D, can't wait till this is the norm.

jack-r-abbit 14y ago

While the overall graphics and the general mechanism looks decent, the actual action of turning a page if very kludgy and glitchy. I found it difficult to get the pages completely turned since the book kept rotating a bit.

city41 14y ago
What browser/OS are you using? For me in Chrome/OSX, the pages turn flawlessly.
- jack-r-abbit 14y ago
  Chromium-based RockMelt 0.16.91.something (on Win7)
jdonaldson 14y ago
Another tiny nit: They don't need those "+" icon interactions. They could've just used the book rotation controls as-is. Popup books usually don't have buttons, at least not from my generation /getoffmylawn.

dave_sullivan 14y ago

So I'll get down voted for this but it needs to be said: this is very cool and is a great proof of concept for the direction things are going. However, if you're promoting a commercial product, event, etc., you could have just used flash--it would be trivialish to implement, perform better, and have no cross browser issues--although no iOS to be fair... As it stands, how many people will hit the site, see it's not working because they have the wrong browser version, and leave?

mikebridgman 14y ago
One thing to consider is that their target audience is attendees of the Front-trends conference, a conference specifically for front end developers. I think it's a safe bet that a majority of the traffic will have a compatible browser.
- dave_sullivan 14y ago
  Ha, excellent point. Judging by some of the comments here, much of their traffic may not have a compatible browser version after all, but I'd imagine that they still have a higher tolerance for that sort of thing in the name of advancing the field.
ceejayoz 14y ago
> and have no cross browser issues--although no iOS to be fair... I love this casual dismissal of tablet/mobile phone users as if it were a non-issue.
- Livven 14y ago
  Umm... as if that animation even worked on iOS or Android browsers...
  - Gormo 14y ago
    Worked fine for me on iPad Safari.
  - 14y ago

RandallBrown 14y ago

Seems like they should have some sort of fallback to users of IE can at least get some information about the conference Very neat effect though. Is this based on actual folding math or is it just a series of neat animations? Like could this be built into a sort of popup book framework?

ralfn 14y ago
You only need a fallback for IE if your audience uses IE

fpp 14y ago

not working in Chrome Version 21.0.1180.77 on Linux

ThePinion 14y ago
I'm on chromium 22 on linux. Maybe you need to go to the about:flags page and enable "override software rendering list" for your browser to use the proper acceleration on the page. That's what I had to do for my old Inspiron 1545.

sahat 14y ago

Works smoothly on Safari 6.0 (8536.25) in Mountain Lion 10.8.

sray 14y ago

This is, to use a word I never use, delightful! Great concept, whimsical design, and wonderful execution. Well done! Now, if I could only stop flipping the pages and get back to work...

thomasfl 14y ago

Hey you polish frontend hackers! Nice work!

mparlane 14y ago

"Boo! It looks like your browser doesn't support 3D transforms." Latest Chrome on Centos6 using a ssh socks proxy. edit: solved thanks to http://news.ycombinator.com/item?id=4393135 http://news.ycombinator.com/item?id=4393135

imjared 14y ago

I worked with the guys who built this (we're a DC design studio) and can tell you that it doesn't gracefully degrade simply because it's not supposed to. As some people grasped, this was for a frontend conference where everyone would be expected to be running the latest and greatest browser. There's no guarantee it will work on your setup but when it does, it's a cool experience. Followup on how it was built here: http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-with-css-3d/ http://coding.smashingmagazine.com/2012/04/17/beercamp-an-ex... Full repo here: https://github.com/nclud/2012.beercamp.com https://github.com/nclud/2012.beercamp.com