Я использую кучу элементов для создания фонового изображения, и все они абсолютно расположены вокруг, свободно вращаясь.
Проблема в том, что я хотел бы перейти только к вращению этих объектов, а не к верхним и левым свойствам. И, видимо, transition: transform 30s; не допускается. У меня была блестящая идея сделать
transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;
Но это тоже не работает. Как я могу это решить?
Трансформация - префикс поставщика
Вместо
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;
Чтобы оживить только свойство 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;