有没有一种方法可以缩放元素，然后在缩放时旋转它，然后将其恢复到原始大小

Question

我正在尝试缩放整个页面，然后在缩放时旋转它，然后将其恢复到原始大小。然而，当旋转开始时，它会将页面恢复到原始大小以进行旋转，而我希望它在缩放时进行旋转。我希望我的解释有道理。

''' 
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes shrinkingback {
0% {
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

}
@keyframes shrinking {
0% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100% {
-ms-transform: scale(0.5);
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}

}
body {

-webkit-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-moz-animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-ms-animation:  shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
-o-animation:  shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
animation: shrinking 3s, rotating 5s linear 3s, shrinkingback 3s 8s;
}
'''

我试着把每个动画放在不同的选择器中。我尝试将变换放在同一个关键帧类中。我尝试在html元素上应用缩放，并在body标记上进行旋转。如果不使用css，或者使用javascript，这可能吗？如果是的话，请引导我去那里。

Answer 1

只需将rotating动画更改为

@keyframes rotating {
from {
-ms-transform: rotate(0deg) scale(0.5);
-moz-transform: rotate(0deg) scale(0.5);
-webkit-transform: rotate(0deg) scale(0.5);
-o-transform: rotate(0deg) scale(0.5);
transform: rotate(0deg) scale(0.5);
}
to {
-ms-transform: rotate(360deg) scale(0.5);
-moz-transform: rotate(360deg) scale(0.5);
-webkit-transform: rotate(360deg) scale(0.5);
-o-transform: rotate(360deg) scale(0.5);
transform: rotate(360deg) scale(0.5);
}
}

这样可以在旋转过程中保持身体比例缩小。