Вверх

Эффект плавного перемещения или трансформирования с помощью CSS3

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

Осваиваем эффект трансформирования(поворота) на 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 — определить значение в ручную.

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

1 бал2 бала3 бала4 бала5 балов (Рейтинга нету)
Загрузка...
     Вызвать мастера :)
Скопировать короткую ссылку

2 комментария Оставить свой

  1. Аватар
    Автор: Геймер - 16.12.2012 в 19:11
    27

    Прикольно получилось. Надо попробовать.

    Ответить

  2. Аватар
    Автор: barbarela - 24.10.2013 в 11:24
    6288

    спасибо большое, что всё расписали!! :mrgreen:

    Ответить

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