Блог

Я просматривал разные учебные пособия, чтобы создать вращающийся 3D-куб в CSS3. Я решил использовать этот урок от the-art-of-the-web.

Моя конечная цель — сделать его похожим на это:

Я хочу, чтобы в конечном состоянии отображались 3 стороны куба. Вероятно, мне также нужно было бы повернуть весь куб так, чтобы нижний угол между A и T был направлен вниз.

Рабочая скрипка ( -webkit )

 @-webkit-keyframes spincube {
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
       -webkit-transform: rotateY(-180deg) rotateZ(90deg) rotateZ(15deg); 
    }
}
 

Посмотреть ДЕМОНСТРАЦИЮ

 -moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
 

Таким образом, вы можете сохранить состояние анимации.