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

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

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

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

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

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

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: