有没有办法缩放元素，然后在缩放时旋转它，然后将其恢复到原始大小答案

【问题标题】：Is there a way to scale an element and then rotate it while it is scaled then bring it back to its original size有没有办法缩放元素，然后在缩放时旋转它，然后将其恢复到原始大小
【发布时间】：2024-01-23 09:44:01
【问题描述】：

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

''' 
@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？如果是，请指导我。

【问题讨论】：

标签： css animation rotation css-animations

【解决方案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);
  }
}

这会使身体在旋转过程中向外扩展。

【讨论】：