Román Cortés » Pure CSS3 Page Flip Effect

Pure CSS3 Page Flip Effect

17 de Mayo del 2010

By using CSS3 gradients, transitions, 2d transforms and clipping, I’ve achieved this pure CSS3 — without Javascript — page flipping effect. By adding some Javascript it would be possible to do a full catalog viewer just like the existent ones done in Flash, but I wanted to try if it was possible to do it without Javascript… and it is!

It works in Webkit based browsers (Safari and Chrome) only. Take a look of it here.

CSS3

34 Comentarios

Dinesh el 19 de Mayo del 2010:

This is awesome. Will learn and try to create a catalog viewer.

Thanks a million
Dinesh
erik el 20 de Mayo del 2010:

Que grande, macho!
10 Mind-Blowing Experimental CSS3 Techniques and Demos - Speckyboy Design Magazine el 21 de Mayo del 2010:

[…] Pure CSS3 Page Flip Effect […]
Ben el 21 de Mayo del 2010:

Literally amazing! It slightly jiggles up and down in Safari, but amazing nonetheless!
John el 21 de Mayo del 2010:

WOW. That is awesome!!!
Mad props for pulling this off.
Micah el 21 de Mayo del 2010:

Doesn’t work on the iPad…
Evan Skuthorpe el 21 de Mayo del 2010:

Doesn’t work in FF.
Rui Andrada el 21 de Mayo del 2010:

Wow, that is great, congratulations!
In The Tech News « Caintech.co.uk el 21 de Mayo del 2010:

[…] Button Maker How to Use the New Google Font API Design Shack 25 Excellent Free Twitter Backgrounds Romn Corts Pure CSS3 Page Flip Effect 10 Mind-Blowing Experimental CSS3 Techniques and Demos – Speckyboy The Complete Beginners […]
Yan el 22 de Mayo del 2010:

Looks great! When do you think we can have the versions to work with Firefox and Safari:-) Thanks bunches!
Román Cortés Creates a CSS3 Page Flip Effect Without JavaScript « Awesome But Useless el 22 de Mayo del 2010:

[…] one is slightly mind-boggling. Román Cortés has created an impressive simulation of page turning using nothing but CSS3 animation. It runs very smoothly in Chrome, but it a little shaky in Safari. Tags: CSS3, gradient, Román […]
Lorenz el 22 de Mayo del 2010:

Doesnt work on iPhone…
menecio el 22 de Mayo del 2010:

saludos, no funciona con Firefox 3.6.2 linux x86_64…
nkm el 22 de Mayo del 2010:

Impresionante.

En Chrome Mac se ve perfecto. En WebKit/Safari la portada tiembla un poco. Una pena que aún no funcione en Firefox.
links for 2010-05-22 « Mandarine el 23 de Mayo del 2010:

[…] Pure CSS3 Page Flip Effect By using CSS3 gradients, transitions, 2d transforms and clipping, I’ve achieved this pure CSS3 — without Javascript — page flipping effect. By adding some Javascript it would be possible to do a full catalog viewer just like the existent ones done in Flash, but I wanted to try if it was possible to do it without Javascript… and it is! […]
Matthew James Taylor el 28 de Mayo del 2010:

That’s awesome Roman!

Nice use of the overflow hidden property to only show the part of the page that has been turned over. I’d love to see a full JavaScript version that works with multiple pages.
Start Using CSS3 Today: Techniques and Tutorials - Smashing Magazine el 17 de Junio del 2010:

[…] show what can be done with a bit of coding, patience and creativity by using simple CSS3 properties. Pure CSS3 Page Flip EffectBy using CSS3 gradients, transitions, 2d transforms and clipping, Roman Cortes achieved this pure […]
shade3d el 18 de Junio del 2010:

Very well done… works fine on Android smartphone as well
CSS3 Design Contest: Join In and Win SSD Hard Drive! - Smashing Magazine el 18 de Junio del 2010:

[…] […]
vnwordpress » Blog Archive » Gi?i thi?u CSS3 el 20 de Junio del 2010:

[…] Pure CSS3 Page Flip Effect B?ng cách s? d?ng CSS3 gradients, transitions, 3d transform và clipping, Roman Cortes gi?i thi?u m?t trang web hoàn toàn s? d?ng hi?u ?ng c?a CSS3(không dùng javascript). Tuy nhiên nó ch? ho?t d?ng trong các trình duy?t (safari và Chrome) […]
64 CSS3 Tutorials & Techniques | Digital Pizza el 1 de Julio del 2010:

[…] Pure CSS3 Page Flip Effect By using CSS3 gradients, transitions, 2d transforms and clipping, Roman Cortes achieved this pure CSS3 page flipping effect (no JavaScript is used). However, it works in Webkit browsers only (Safari and Chrome). […]
lori el 4 de Julio del 2010:

Unfortunatly I am not very good in web, yet. I, however love this idea, the soda can rocks as well as the others. Love the flip, very cool ideas!
TOPGFX » Blog Archive » 20 Shocking CSS3 Techniques el 5 de Julio del 2010:

[…] Pure CSS3 Page Flip Effect […]
Renaldo Creative el 10 de Julio del 2010:

Nice work, this is awesome.
Gi?i thi?u CSS3 dành cho thi?t k? website | VNWordPress.com el 13 de Julio del 2010:

[…] Pure CSS3 Page Flip Effect B?ng cách s? d?ng CSS3 gradients, transitions, 3d transform và clipping, Roman Cortes gi?i thi?u m?t trang web hoàn toàn s? d?ng hi?u ?ng c?a CSS3(không dùng javascript). Tuy nhiên nó ch? ho?t d?ng trong các trình duy?t (safari và Chrome) […]
O maravilhoso mundo do CSS3! | Gaiuss oBlog el 16 de Julio del 2010:

[…] http://www.romancortes.com/blog/pure-css3-page-flip-effect/ […]
15 Ejemplos del potencial de CSS3 en davidcostales blog el 13 de Septiembre del 2010:

[…] Page Flip EffectVisitar sitio […]
droope el 22 de Diciembre del 2010:

Woah! Amazing!
jcubic el 31 de Diciembre del 2010:

Nice but don’t work in Firefox
Sumit el 22 de Enero del 2011:

Great Look! But is there a Tutorial outside, where it uses Javascript to do the full catalog viewer?
Thanks a lot!
Victor el 13 de Abril del 2011:

Has anyone tried to make a javascript version of this?
jessic el 2 de Noviembre del 2011:

Great Look!
I want to know : do you now have the versions to work with Firefox and Safari?
Thanks a lot!!!
Román Cortés el 3 de Noviembre del 2011:

Hi Jessic,

I didn’t. I’ve had no time lately to update my blog or to do anything related. But Stu Nicholls from CSSplay did it, based in my effect:

http://www.cssplay.co.uk/menu/cssplay36.html
http://www.cssplay.co.uk/menu/cssplay-flip.html

I hope it helps!

P.S. I tried to contact you by email, but you wrote it wrong, so I hope you read this…
Bindiya el 20 de Marzo del 2012:

Thanks a lot! It’s so amazing!