hover zoom or scale effect using css3

html : 


<div class="menu">    
              <section class="color-10">
<nav class="cl-effect-10">
<a href="what-is-caked.php" ><span class="whats-menu">About</span></a>
<a href="cakes.php" data-hover="Cakes"><span class="cakes-menu">Cakes</span></a>
<a href="add-ons.php" data-hover="Add-Ons"><span class="addons-menu">Add-Ons</span></a>
<a style="margin-right:0 !important;" href="contact.php" data-hover="Contact us"><span class="contact-menu">Contact us</span></a>
</nav>
</section>



css :

.cl-effect-10  {
position: relative;
z-index: 1;float: right; height: 70px;
}

.cl-effect-10 a {
overflow: hidden; margin-right: -0.25em;
}

.cl-effect-10 a span {
display: block;
padding: 24px 20px;
background: #0f7c67;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 350ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 350ms;
}
.cl-effect-10 a:hover span {
background: #fff !important;
    -webkit-transform: scale(1.3,1.5);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 350ms;
    -moz-transform: scale(1.3,1.5);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 350ms;
    position: relative;
    z-index: 99;
}