Свойство css: transform rotate

Всех приветствую. Сегодня я расскажу вам о css-свойстве transform rotate. В частности, как оно записывается, поддерживается, применяется. В общем, вся полезная информация.

Данное свойство позволяет повернуть нужный элемент на указанное количество градусов. Максимальное значение — 360 градусов, можно указывать отрицательные значения. Тогда поворот происходит в другую сторону. Для наглядной демонстрации работы свойства мы используем слона. Заставим слона сделать заднее сальто:

.rotate:hover{
	transform: rotate(360deg)
}

А теперь переднее. Напомню, что для смены стороны, в которую происходит поворот, просто укажите отрицательное значение.

.rotate1:hover{
	transform: rotate(-360deg)
}


Ну и кто вам сказал, что поворачивать можно только на 360? Подходит любое значение от 0 до 360. Перевернем слона вверх ногами:

.rotate2:hover{
	transform: rotate(-180deg)
}

Собственно, это лишь несколько примеров применения transform: rotate. Сегодня уже свойство достаточно хорошо поддерживается современными браузерами, поэтому и активно используется.

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

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.
.rotate{
	animation-name: rotate;
	animation-duration: 1.3s;
	animation-iteration-count: infinite;
}
@keyframes rotate{
	from{transform: rotate(0deg)}
	to{transform: rotate(360deg)}
}

Ну как-то так laugh Я жду вопросов в комментарии, если они есть. Извиняюсь за короткую статью, что-то сегодня нет сил ничего писать, да и раскрывать особо-то и нечего. Думаю вам на этих примерах все понятно.

Комментариев: 1
  1. Юрий Ваценко

    Блин, а прикольно, покрутил всех слоников. На счет усталости, то действительно, нужно и отдыхать. лето же на дворе. smile

Добавить комментарий