css - 旋转立方体中的动画宽度和高度

Question

我有一个旋转立方体随着这个 CSS3 动画旋转:

@-webkit-keyframes rotating {
    from { -webkit-transform: rotateX(0deg) rotateY(0deg); }
    to { -webkit-transform: rotateX(360deg) rotateY(360deg); }
}

.animate {
    -webkit-animation: rotating 4s infinite linear; 
}

我希望立方体在旋转时变大和变小，所以我尝试在规则中添加 width 和 height:

@-webkit-keyframes rotating {
    from { -webkit-transform: rotateX(0deg) rotateY(0deg);
            width: 0; height: 0; }
    to { -webkit-transform: rotateX(360deg) rotateY(360deg);
            width: 300px; height: 300px;}
}

但这并没有达到我的预期。

Answer 1

在动画中使用 scale(0,0) 到 scale(1,1)(尝试使用 scale2D() 如果它不起作用)。在使用缩放之前还要为元素设置宽度和高度

.element{
    width: 300px;
    height: 300px;
}

@-webkit-keyframes rotating {
    from { 
      -webkit-transform: rotateX(0deg) rotateY(0deg) scale(0, 0);  
    }
    to { 
      -webkit-transform: rotateX(360deg) rotateY(360deg) scale(1, 1);       
    }
}