Оживляющих и высоту при вращении куба

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