ページの読み込み時に要素を 0 から拡大しようとしていますが、その要素を回転させる必要があります。単純なことのように見えますが、アニメーションが終了した後に回転を適用するようです:
@-webkit-keyframes scale{
0%{-webkit-transform: scale(0);}
100%{-webkit-transform: scale(1);}
}
div{
-webkit-transform: rotate(30deg);
-webkit-animation: scale 2s;
}