11:38
Автор: Рубрика: HTML и CSS Один комментарий

Свойство 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. Сегодня уже свойство достаточно хорошо поддерживается современными браузерами, поэтому и активно используется.

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

.rotate{
animation-name: rotate;
animation-duration: 1.3s;
animation-iteration-count: infinite;
}

@keyframes rotate{
from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}

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

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

Один комментарий
  • Юрий Ваценко

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

    2016-07-08 в 12:21 | Ответить