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

Осваиваем эффект трансформирования(поворота) на CSS

Само трансформирование может быть организовано многими способами, мы возьмем самый распространенный — изменение позиции при наведении. Создаем простой элемент-артинку:

[php]

[/php]

Я не буду останавливаться на позиционировании объекта  и т. п. – сразу перейду к делу, картинку мы будем поворачивать на 180 градусов. За этот эффект у нас отвечает структура CSS классов:

[css]
#myimg:hover .object-trans {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
[/css]

Настраиваем эффект плавной трансформации на CSS3

Предыдущая структура только изменит положение картинки, а за плавный переход отвечает вот эта:

[css]
#myimg .object-trans {
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
[/css]

Вы можете использовать 6 различных эффектов трансформирования данной структуры:

  • linear – от начала и до конца одна скорость трансформирования
  • ease – набирающее скорость трансформирование.
  • ease-in – начинать медленно трансформирование.
  • ease-out – заканчивать медленно трансформирование.
  • ease-in-out – начинать и заканчивать трансформирование медленно.
  • cubic-bezier – определить значение в ручную.

Просмотрите еще раз демо того что получилось!