Menu
I have a button of size 50 x 50. On hover, I need to replace this button by a 70 x 70 size button. Also, The transition should be smooth.
So, I am trying to use the CSS transition and transform function. That is, transform3d in z-axis.
<style>
.button1{
position:absolute;
top:0px;
left:0px;
display:inline-block;
width:50px;
height:50px;
background:url(images/button.png) no-repeat;
background-position:bottom left;
/* Transition */
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.button1:hover{
width:70px;
height:70px;
background-position:top left;
-webkit-transform: translate3d(0, 0, 10px);
-moz-transform: translate3d(0, 0, 10px);
-ms-transform: translate3d(0, 0, 10px);
-o-transform: translate3d(0, 0, 10px);
}
</style>
</head>
<body>
<a href="#" class="button1"></a>
</body>
I have tried this code for x and y transforms and it works. But, it does not work for the z-axis.
Basically, I want a smooth easing zoom effect on hover.
Please suggest.
390
You're over-complicating the problem by attempting to scale with dimensions and transforms at the same time.
Simply applying a scale transform will achieve what want, although large scales can produce blurs on images and text.
.button:hover {
/* Un-prefixed. Prefix `transform` for all target browsers. */
transform: scale(1.2);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
