I believe there are some adjustments needed in your code
JSFiddle
HTML:
<div id="menuDiv">
<a href="#" id="home">
<span class="menuIcon"></span>
<span class="menuText">App Home</span>
</a>
<a href="#" id="help">
<span class="menuIcon"></span>
<span class="menuText">Help</span>
</a>
<a href="#" id="photos">
<span class="menuIcon"></span>
<span class="menuText">See photos</span>
</a>
<a href="#" id="mail">
<span class="menuIcon"></span>
<span class="menuText">Mail</span>
</a>
</div>
CSS:
body{
background-color: #E2E2E2;
}
*{
padding :0px;
margin: 0px;
}
#menuDiv{
padding:5px;
background: yellow;
display: inline-block;
float: right;
}
#menuDiv a {
background: pink;
width: 48px;
height: 48px;
float: right;
overflow: hidden;
position: relative;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuDiv .menuIcon {
width: 48px;
height: 48px;
float: left;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#menuDiv a#home .menuIcon {
background: url("http://3.ii.gl/e95k6KER.png") no-repeat left center;
}
#menuDiv a#help .menuIcon {
background: url("http://3.ii.gl/E-E-GRnJt.png") no-repeat left center;
}
#menuDiv a#photos .menuIcon {
background: url("http://3.ii.gl/saNZbewlk.png") no-repeat left center;
}
#menuDiv a#mail .menuIcon {
background: url("http://3.ii.gl/eOns-8L.png") no-repeat left center;
}
#menuDiv .menuText {
width: 100px;
height: 48px;
line-height: 48px;
position: absolute;
padding-left: 16px;
text-decoration: none;
left: 48px;
}
#menuDiv a:hover {
width: 148px;
}
#menuDiv a:hover .menuIcon {
-webkit-transform: rotate(-1440deg);
transform: rotate(-1440deg);
}