CSS3作為前端開發中的必備技能，提供了許多動畫效果，其中放大旋轉動畫效果是非常常見的一種。下面我們來學習一下如何通過 CSS3 實現這種動畫效果。

.animation {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation: zoom-and-rotate 2s ease-in-out infinite;
}
@keyframes zoom-and-rotate {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.5) rotate(45deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}

首先定義一個class名為.animation的元素，設置其寬高以及背景顏色，同時相對定位，以便于動畫效果的展示。

接著通過animation屬性調用名為"zoom-and-rotate"的動畫，設置動畫時間為2秒、緩動方式為"ease-in-out"并且無限循環。

最后通過@keyframes定義"zoom-and-rotate"動畫的關鍵幀，其中0%表示動畫開始時的狀態，50%表示動畫進行到一半的狀態，100%表示動畫結束時的狀態。在這個動畫中，我們實現了從1倍大小旋轉0度到1.5倍大小旋轉45度再回到1倍大小旋轉0度的效果。

使用以上代碼就可以輕松地實現一個放大旋轉動畫效果啦！