3D dropdown reveal like norwegian website - Kodhus

3D dropdown reveal like norwegian website

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

3D dropdown reveal

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.

<div class="col-md-6">
    <input type="search" name="search" id="from" placeholder="source">
    <div class="from-data">

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.

@keyframes slide {
    0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    45% {
        -webkit-transform: rotateX(25deg);
        transform: rotateX(20deg);
    100% {
    	-webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);

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.

.from-data {
    position: relative;
    margin-top: 5px;
    perspective: 700;
    -webkit-perspective: 700;
    z-index: 3;

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.

ul.visible {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
    -webkit-animation: slide .8s;
    -webkit-animation-fill-mode: forwards;
    animation: slide .8s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
    visibility: visible;

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.

$(function() {
	var allOptions = $('ul');
	$('input').click(function() {
		allOptions.removeClass('visible'); //When input clicked, first remove visible from all dropdowns
	$('li').click(function() {

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn