

Amazing CSS3 3D popup book - mikebridgman
http://2012.beercamp.com/

======
imjared
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-
ex...](http://coding.smashingmagazine.com/2012/04/17/beercamp-an-experiment-
with-css-3d/)

Full repo here: <https://github.com/nclud/2012.beercamp.com>

------
jack-r-abbit
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
What browser/OS are you using? For me in Chrome/OSX, the pages turn
flawlessly.

~~~
jack-r-abbit
Chromium-based RockMelt 0.16.91.something (on Win7)

------
dave_sullivan
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?

~~~
ceejayoz
> 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
Umm... as if that animation even worked on iOS or Android browsers...

~~~
da_n
I can also confirm works on iOS (using iPad), has a couple of spacing
glitches, however page turning animation is extremely smooth, an the actual
pop-ups are exact same as on desktop, no problem and performs like a champ.

------
dazzawazza
There seems to be quite a lot of Javascript in there as well :) Really nice
design.

BTW: works fine in Safari 6.0 OSX

------
sray
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...

------
Narretz
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.

------
RandallBrown
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
You only need a fallback for IE if your audience uses IE

------
mparlane
"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>

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

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

------
thomasfl
Hey you polish frontend hackers! Nice work!

------
atirip
Immediately crashes iPad Safari :-(

~~~
hnriot
Not for me, ipad3 here and it worked fine

~~~
huntaub
It worked for me on iOS 6. I can't speak for earlier versions.

------
fpp
not working in Chrome Version 21.0.1180.77 on Linux

~~~
ThePinion
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.

------
jawr
doesn't work under Chrome Version 20.0.1132.57 :(

~~~
tseabrooks
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
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.

~~~
hazelnut
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
The browser does to decide if it's safe to use them. JS should be able to just
use feature detection.

