有没有办法缩放一个元素，然后在缩放时旋转它，然后将它恢复到原来的大小

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;
}
'''

我尝试将每个动画放在不同的选择器中。我试图将转换放在同一个关键帧中 class。我尝试在 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);
  }
}

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

有没有办法缩放一个元素，然后在缩放时旋转它，然后将它恢复到原来的大小

Is there a way to scale an element and then rotate it while it is scaled then bring it back to its original size

css

animation

rotation

css-animations