Create Amazing Mac(OS X) Dock UI Using Pure CSS3

When I was working on Amazing Windows7 Start Menu Using Pure CSS3 , I want to create something on Mac OS X UI also. So today I will explain you how to create Amazing Mack Dock UI using CSS3. In this code I am using pure css3 properties for different effects. Have a look at the demo below.
Create Amazing Mack Dock UI Using Pure CSS3(techumber.com)


demo
download

index.html

<div class="dock_left"></div> 
<div class="dock"> 
<ul> 
<li><a href="http://techumber.com/"><img src="icons/home.png" alt="Home"></a></li> 
<li><a href="http://techumber.com/"><img src="icons/apple.png" alt="Apple"></a></li> 
<li><a href="http://techumber.com/"><img src="icons/safari.png" alt="Safari"></a></li> 
<li><a href="http://techumber.com/"><img src="icons/harddrive.png" alt="harddrive"></a></li> 
<li><a href="http://techumber.com/"><img src="icons/tools.png" alt="Tools"></a></li> 
</ul> 
</div> 
<div class="dock_right"></div> 

This is the simple html on which we will apply our css properties.
style.css

.dock ul{ 
display: inline-block; 
float: left; 
width: auto; 
margin: 0px; 
padding: 0px; 
list-style: none; 
background: rgba(0, 0, 0, 0.3); 
padding-right: 76px; 
} 
.dock ul li { 
width: auto; 
height: auto; 
display: inline-block; 
bottom: 0; 
vertical-align: bottom; 
margin-top: -43px; 
} 
.dock ul li a { 
display: block; 
height: 100px; 
width: 100px; 
position: relative; 
-webkit-transition-property: width, height,margin-top; 
-webkit-transition-duration: 0.5s; 
-o-transition-property: width, height,margin-top; 
-o-transition-duration: 0.5s; 
-moz-transition-property: width, height,margin-top; 
-moz-transition-duration: 0.5s; 
} 
.dock ul li a:hover { 
width: 150px; 
height: 150px; 
margin-top: -50px; 
} 
.dock ul li a img { 
width: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
border: none; 
padding: 0px 0px 0px 30px; 
} 
.dock_left{ 
width: 31px; 
-webkit-transform: rotate(33deg); 
-moz-transform: rotate(33deg); 
-o-transform: rotate(33deg); 
position: relative; 
background: #EEE; 
overflow: hidden; 
float: left; 
height: 100px; 
z-index: 2; 
margin: -18px; 
} 
.dock_right{ 
width: 36px; 
-webkit-transform: rotate(-33deg); 
-moz-transform: rotate(-33deg); 
-o-transform: rotate(-33deg); 
position: relative; 
background: #EEE; 
overflow: hidden; 
float: left; 
height: 100px; 
z-index: 2; 
margin: -18px; 
} 

In this we applying CSS3 properties transform and transition to get the effects.
Hope you like it!