Javascript 放大/缩小并使用平滑过渡旋转div

我的第一篇帖子！ 我一直在做一些实验，试图重现我看到的东西。 以下是我努力实现的目标：

现在看看我的代码：

HTML

Jquery

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

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

1.如何使用css3、jquery或javascript在悬停状态下执行此操作？（不是onmouseover/onmouseout）

2.如何使渲染更平滑？（字母在分辨率较差的情况下放大，然后渲染到完全质量）

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

---

我试着分别进行放大和旋转，这两种方法都有效，但是如果我想同时进行这两种方法，CSS3会用另一种方法覆盖它们，使用这个函数并不能得到我想要的结果

您只需使用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: rotate(15deg);
    -wekbit-transform: rotate(15deg); // Chrome / Safari
    -moz-transform: rotate(15deg); // Firefox
}

---

您只需使用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: rotate(15deg);
    -wekbit-transform: rotate(15deg); // Chrome / Safari
    -moz-transform: rotate(15deg); // Firefox
}

---

谢谢过渡部分工作得很好，正是我想要的！现在，悬停部分给了我一些奇怪的反应，因为div在它上面跳跃，但这可能是因为CSS中的一些设置。我会努力找出原因。当我们讨论这个话题时，如何在函数中实现“悬停”效果？我试过了。在（‘悬停’）上，但不起作用。有什么建议吗？只是为了编辑，这个小函数很方便，因为它可以切换类，打开和关闭它们。我想实现悬停效果而不是单击。你已经关闭了它。您可以在（“hover”，函数{}）上执行$（“.class”）；或$（“.class”）.hover（函数（）{}）；完美的很高兴你找到了答案。别忘了把

：focus

样式放在你放的任何地方

：hover

，这样你就可以支持那些使用键盘浏览页面的人。如果你使用脚本而不是CSS，同样的交易。@aardrian肯定会这样。我不想因为包含：focus或：active而让人感到困惑，但从长远来看，您肯定会希望包含这些。谢谢，过渡部分工作得很好，正是我想要的！现在，悬停部分给了我一些奇怪的反应，因为div在它上面跳跃，但这可能是因为CSS中的一些设置。我会努力找出原因。当我们讨论这个话题时，如何在函数中实现“悬停”效果？我试过了。在（‘悬停’）上，但不起作用。有什么建议吗？只是为了编辑，这个小函数很方便，因为它可以切换类，打开和关闭它们。我想实现悬停效果而不是单击。你已经关闭了它。您可以在（“hover”，函数{}）上执行$（“.class”）；或$（“.class”）.hover（函数（）{}）；完美的很高兴你找到了答案。别忘了把

：focus

样式放在你放的任何地方

：hover

，这样你就可以支持那些使用键盘浏览页面的人。如果你使用脚本而不是CSS，同样的交易。@aardrian肯定会这样。我不想因为包含：focus或：active而让人感到困惑，但从长远来看，你肯定会希望包含这些。

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