By
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.
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.
