nesha nesha - 6 months ago 71
jQuery Question

Zoom in/out and rotate div with smooth transition

my first post!
I have been doing some experiments, trying to recreate something i saw.
Here is what i am trying to achieve:

Scroll at the end of this page and take a look at animated buttons for twitter, youtube, facebook

Now take a look at my code:

HTML

<div class="container">
<div class="letter">A</div>
</div>


CSS

*{
margin:0;
padding:0;
}

.container{
width:200px;
height:200px;
background:purple;
overflow:hidden;
}

.letter{
text-align:center;
font-size:50px;
line-height:170px;
color:white;
}

.letter:hover{
cursor:pointer;
}

.letter.zoom{
transform:rotate(15deg) scale(3);
transition: transform 0.6s ease;
}


Jquery

$(function(){
$('.container').on('click', function(){
$('.letter').toggleClass('zoom');
});
});


Now, if you run the code, you will see letter A, and on click it will zoom in and slightly rotate. Here are my issues:

1.how to do this on hover, using css3 or jquery or javascript?(not onmouseover/onmouseout)

2.how to make the rendering smoother?(the letter zooms in in poor resolution and than renders to full quality)

3.it has animated transition on zoom in. When it zooms out there is no animation or transition. How to do the animation on zoom out, on hover out?

I have tried to do separately just zoom in and just rotate, and it works, but if i want to do both in the same time, CSS3 is overriding one with another, and using this function is not giving me the result i want.

Answer

You can do this with just CSS:

Transition:

.letter {
    transition: ease .25s; // when set on selector itself, will apply to all pseudo-classes such as: :hover, :active, :focus, etc.
    -webkit-transition: ease .25s;
}

Zoom:

.letter:hover {
    transform: scale(1.5); // Alternatively, you can use percentages
    -wekbit-transform: scale(1.5); // Chrome / Safari
    -moz-transform: scale(1.5); // Firefox
}

Rotate:

.letter:hover {
    transform: rotate(15deg);
    -wekbit-transform: rotate(15deg); // Chrome / Safari
    -moz-transform: rotate(15deg); // Firefox
}