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

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