放大/缩小并通过平滑过渡旋转div

Question

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

滚动到此页面末尾，查看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实现这一点？(非满仓/满仓)

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
}