Folding cover animation in CSS

14 Responses

1. Gaddafi Rusli

   I was highly inspired by @Daryl Ginn from his Flipper shot so I decided to learn some new stuff. This is the result of my learning process on CSS perspective, transform and transition. It is a bit tough to get the transition right especially with the angle and gradient and shit. After more than 5 revisions, this is the probably the best one I can achieve, for now. Let me know what you think!

   See it in action

   Note: Work best in latest FF and Chrome. Safari's transition is not that smooth for me here.

   1likes

   10 months ago

2. Coen van Hasselt

   That's awesome Gad!

   10 months ago

3. Pro Abdullah

   @Gaddafi Rusli Brilliant!

   10 months ago

4. Abdusfauzi

   On Safari: during the folding animation, there seems to be a gap between slices. Maybe, just because I watched it using Safari.

   anyway, crazy stuff bro, crazy. :D

   10 months ago

5. Gaddafi Rusli

   @Coen van Hasselt ◕‿◕ & @Abdullah : Thank you!
   @Abdusfauzi Yes, can't seem to solve that in Safari. Well.. Thanks!

   10 months ago

6. Pro Adi Hezral

   awesome..i remember reading this site http://tympanus.net/Tutorials/3DHoverEffects/index.html

   full of awesome animations

   10 months ago

7. Gaddafi Rusli

   @Adi Hezral wow those are some crazy effects! But mine is pure CSS :P haha

   10 months ago

8. Pro Sean Glass

   That's freakin' awesome. Very smooth.

   10 months ago

9. Pro Adi Hezral

   @Gaddafi Rusli there's your challenge :)

   10 months ago

10. Ikram Hakimi

    nice shot and demo @Gaddafi Rusli ;)

    10 months ago

11. Gaddafi Rusli

    @Sean Glass Thank you!
    @Adi Hezral Ha! Maybe I should try!
    @Ikram Hakimi Thanks :)

    10 months ago

12. Wawan

    Will you let me marry it?

    1likes

    10 months ago

13. Gaddafi Rusli

    @Wawan haha sure go ahead!

    10 months ago

14. Pro Sergie Magdalin

    awesome!

    6 months ago