3D Folding Panel in CSS and jQueryWednesday, May 13th, 2015

Articles, CSS, Jquery

A secondary content panel that folds flat, powered by CSS Transformations and jQuery.

3D fold effects are pretty popular nowadays, mostly because they have been integrated quite often in mobile apps. A beautiful example is the iOS Peek Calendar app. Thanks to CSS3 transformation and transitions, we can create a similar interaction in the browser!

Sometimes these 3D effects feel too strong, unnecessary. It’s a point I can’t argue with. However, there will be cases when you need to load content, a process that requires time (even if it’s just half a second). In these cases an animation can be a nice way to replace a loading bar, or a loading gif. Besides, with the growth of native apps built on top of web frameworks, learning how to create complex CSS transformations is an ace up your sleeve 😉

Source: 3D Folding Panel in CSS and jQuery

Like it? Share it!


Amit is a digital consultant with a passion for design, interaction and usability. In his free time if he's not at the gym he's traveling the world.

View all posts by: WebMotionUK

Leave a Comment

You can use these HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>