Zoom effect using Css transition and transform?

css transform css-transitions

23,015

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);
    }

23,015

Author by

Sangam254

Updated on October 20, 2020

Comments

Sangam254 over 3 years

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.