3D Effect for Mobile App Showcase

A fancy 3D effect for a mobile app showcase where the app screens animate to a layered stack.

appshowcase3d

View demo Download source

Today we’d like to share an experimental 3D effect with you. It involves a 3D mobile device and some mobile app screenshots. When clicking on a toggle button, we’ll animate the mobie device to rotate and we’ll move each screen so that we have a layered view in the end. You have surely seen this kind of presentation of apps before and we thought it might be fun to do it in CSS.

Please note: this only works as intended in browsers that support the respective CSS properties. Modern browsers only!

The idea is to position the mobile device with an slight initial rotation:

appshowcase3d_1

Then we apply a class to the wrapper which will make the device transition to a second position where the screens move out in a layer stack. Effect one is the following:

appshowcase3d_2

The second effect has a different rotation:

appshowcase3d_3

And the third one will also show some labels:

appshowcase3d_4

The screens are anchors so that one can actually link them to eventual info pages. There are a lot of possibilities here, go nuts.

There is a SCSS file included for dealing with some dimension variables of the device and some other variables.

The 3D phone includes a technique for the rounded corners involving pseudo elements for the sides, first implemented by brilliant web designer and developer Jonathan Levaillant.

We hope you enjoy the effects and that they give you some inspiration.

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 27

  1. 3

    Great work! Really like your other stuff but this one is amazing. Hopefully you will make one with a iMac as well using this style.

    Keep up the great work.

    Mike

Follow this discussion

Leave a Comment

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