News

Build a 3D CSS animated menu

Unleash the power of CSS to create a flip-out 3D effect for all screens

Screen-shot-2014-09-04-at-12.23.26

Screen shot 2014-09-04 at 12.23.26

INSPIRATION: http://humblebee.se

Humblebee is an innovative web development studio based in Gothenburg, Sweden. Its website is a beautiful fusion of design and development coming together to show off a stunning portfolio of work.

The site adopts a minimal approach that allows the content to come to the forefront. It features several animated SVG files as well as a menu that uses 3D transforms to reveal itself when the user clicks to activate it.
These beautiful and yet understated additions, like the animations, show that this studio can deliver great web content that has the ability to use just the right amount of technique to make content stand out.

DOWNLOAD TUTORIAL FILES

Create a page

We are going to create a 3D flip-over icon when you rollover it like that found in the menu on ‘Humblebee’. In Dreamweaver or similar create a new HTML5 document and add the following <div> structure to the body section of the page. This creates the two sides of the icon.

001 <div id=”card”>
002    <div id=”front” class=”shadow”>
003        <div class=”frontface”>
004    <img src=”images/menu.png”/>
005        </div>
006        <div class=”backface”>
007    <img src=”images/close.png”/>
008        </div>
009    </div>
010 </div>

Styling the card

In the head section of the document, add the style tag and then create the style for the ‘card’ <div>. This is the container that holds both the front and back. We are creating a 200 x 200px box that is centred. We are only adding WebKit browser prefixes for brevity, so please add them as necessary.

001 <style>
002 #card {
003  position: relative;
004  margin: 50px auto;
005  width: 200px;
006  height: 200px;
007  z-index: 1;
008  -webkit-perspective: 1000;
009 }

The front of the card

We add the code as shown below which adds the front element to the card. The important part here is the speed of the transition (half a second), and that we have moved the origin to the right hand edge of the image. On hover we rotate the object 180 degrees.

001 #front {
002  width: 100%;
003  height: 100%;
004  -webkit-transform-style: preserve-    3d;
005  -webkit-transition: all 0.5s     linear;
006  -webkit-transform-origin: 200px;
007 }
008 #card:hover #front {
009  -webkit-transform: rotateY(180deg);
010 }

Front and back

Both the front and back of the icon share some of the same properties, they are positioned absolutely and are black. We also set the backface visibility to hidden so that the other side cannot be seen through, which would happen if we had text instead of an image.

001 .face {
002  position: absolute;
003  width: 100%;
004  height: 100%;
005  -webkit-backface-visibility:     hidden;
006  background-color: #000;
007 }

The back icon

Add the final code (see the resource CD) to rotate the back 180 degrees. This means on rollover the icon rotates back and becomes visible. Save and view it in the browser to see the rotation using CSS to control this.

×