Можете объяснить CSS3 анимацию?

Question

[littleguga]

Есть вот такая анимация
Как сделать, чтобы при появлении картинка крутилась не по часовой, а против?
И можете, пожалуйста, дать ссылку на подробное объяснение или объяснить сами действие вот этого:
transform: matrix(-.01,0,0,-.01,0,-125);
Заранее благодарен за ответ!

Comments

[Nikolay Talanov]

Не советую вам изучать css трансформы на основе matrix. Проще использовать отдельные атрибуты, отвечающие за translate/rotate/scale/skew, чем мучать себя матрицей. С матрицей необходимо работать только тогда, когда вы с помощью js парсите текущее состояние тарснформации, которое собственно представлено в виде матрице. Но такое редко бывает необходимо.

Answer 1

[Дмитрий]

.container {
    transform: rotate(-180deg) translate(0px, 125px) scale(0.01, 0.01) ;
  }


@keyframes appear {
  50%{
    transform: rotate(-360deg);
    }
}

Посмотрите еще вот здесь ссылка

Comments

[littleguga]

В итоге картинка отзеркаленная получается.

[Дмитрий]

littleguga: верно. сразу и не заметил.

[littleguga]

Дмитрий: Спасибо большое!

Answer 2

[olamedia .]

htmlbook.ru/blog/matritsa-preobrazovanii

Comments

[littleguga]

Спасибо!

Answer 3

[localghost]

Я не эксперт, и приведенные в примере параметры ставят меня в тупик (это случайные числа и они не отражают какого-то вращения по часовой, или я чего-то упускаю?), но не спасет ли вас эта ссылка: htmlbook.ru/blog/matritsa-preobrazovanii ?
Кроме того, вы же можете передать в transform:rotate как положительные, так и отрицательные значения, нет?

Comments

[olamedia .]

выглядят как случайные - по крайней мере матрица не нормализована явно

[littleguga]

Нашел в интернете, за ссылку спасибо.