Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

3D dropdown reveal

3D dropdown
Like & share to be notified of the new tips & tutorials:

3D dropdown reveal

Difficulty Level

In this tutorial we will create a 3D dropdown reveal effect only using css3 animations and 3D rules.
Concepts like css keyframes, perspective, transform-origin and animations will be used.
Checkout the demo before going any further.


We are using bootstrap library for responsiveness. The markup is simple. one label, one input and and a div containing an unordered list of the cities.

First, Let’s define our reveal animation.
We want the dropdown to rotate around x Axis. So first we rotate it back 90 degrees. then we rotate it to 20 degrees so that it comes towards the screen and then to 0 degree.

In order to make it look 3D, we have to define perspective on the parent container of the unordered list which is the div with class from-data.

this perspective is the distance from the screen to the z plane which gives us the feel of perspective.

Finally, we want the options to reveal when we click on the input box.
We do it by adding following class to the unordered list.

As you can see, we set the transform style to preserve-3d, we set the origin(rotation pivot point) to be the top center of the unordered list and then we set the animation to be the slide animation we defined before and the duration to 0.8 seconds.


Using jQuery, when each input is clicked we add the class visible to the ul to apply our animation and also when the options are revealed we use another click handler to add the option to the input.