Как перейти только поворот трансформации?

Я использую кучу элементов для создания фонового изображения, и все они абсолютно расположены вокруг, свободно вращаясь.

Проблема в том, что я хотел бы перейти только к вращению этих объектов, а не к верхним и левым свойствам. И, видимо, transition: transform 30s; не допускается. У меня была блестящая идея сделать

Но это тоже не работает. Как я могу это решить?

Ответы

Ответ 1

Трансформация - префикс поставщика

Вместо

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

делать

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;

Ответ 2

Чтобы оживить только свойство rotate, я обнаружил, что это работает, по крайней мере, в Chrome:

transition: transform 2.0s;

Вы можете установить разные времена анимации для разных свойств внутри свойства одного перехода:

transition: transform 2.0s, color 5.0s, font-size 1.0s;

Трюк с свойством rotate заключается в том, что вместо этого вы используете свойство transform. Интуитивно это должно работать, но НЕ работает:

transition: rotate 2.0s; /* DOES NOT WORK */

Вместо этого вы должны использовать transform вместо rotate:

transition: transform 2.0s;

Это, вероятно, потому, что rotate: 90deg является сокращением для transform: rotate(90deg)

Примечание

transition теперь поддерживается в последних версиях всех основных браузеров. Я предполагаю, что если вы хотите больше совместимости со старыми браузерами, вы можете сделать что-то вроде:

-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;