javascript - 放大/缩小和旋转 div，平滑过渡

Question

我的第一篇文章! 我一直在做一些实验，试图重现我所看到的东西。 这是我想要实现的目标:

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

现在看看我的代码:

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

现在，如果运行代码，您将看到字母 A，单击它会放大并稍微旋转。这是我的问题:

1.如何在悬停时使用 css3 或 jquery 或 javascript 执行此操作？(不是 onmouseover/onmouseout)

2.如何让渲染更流畅？(字母在低分辨率下放大，然后渲染到全质量)

3.放大时有动画过渡。缩小时没有动画或过渡。如何在缩小、悬停时制作动画？

我尝试过单独进行放大和旋转，并且它有效，但如果我想同时执行这两项操作，CSS3 会用另一个函数覆盖一个函数，并且使用此函数不会给我结果想。

Answer 1

您只需使用 CSS 即可做到这一点:

转换:

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

缩放:

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

旋转:

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