Динамічний CSS: трансформація об 'єктів

Динамічний CSS: трансформація об 'єктів

Анімація елементів сторінки може функціонувати у вигляді самостійного процесу або виконуватися для візуалізації дій відвідувача. У будь-якому випадку CSS-трансформація елемента не впливає на загальний потік і виконується незалежно від вмісту сторінки в цілому.

При використанні правил і розробці логіки зміни елементів, використання правильних значень властивостей і правил дуже важливо. Трансформація CSS не надає розробнику можливості керування. Всі перетворення виконуються за вказаними функціями та їх значеннями.


  • сформована динаміка;
  • утворена перспектива;
  • виконано обсяг.

У будь-якому випадку всі перетворення відбуваються на площині, але результат можливий як в 2D, так і в 3D-відображенні.

У наступному прикладі представлені чотири області, на кожній з яких йде CSS-трансформація.

Верхній ряд картинок - оригінал, нижній ряд - результат застосування функцій. Для демонстрації основних можливостей використовується наступний опис CSS і показана вставка в HTML-код сторінки.

У цьому прикладі трансформація відбувається при наведенні миші на елемент і призначається через псевдоклас hover.

Щодо властивості transform при використанні функції translate слід зазначити, що CSS-трансформація може бути замінена властивостями left і top. Щодо спотворення від функції skew - результат може бути не передбачуваний.

Вважається, що skew рідко використовується, але при правильному і комплексному застосуванні CSS-анімації зі skew дозволить вибудувати динаміку в тривимірному просторі при русі елемента. Наприклад, "космічний корабель по орбіті" в контексті веб-сторінки може бути рухом товару по вітрині в просторі магазину.


Перспектива під час трансформації

Трансформація тексту в CSS може дати особливий ефект під час застосування перспективи. У прикладі показано, як нормальне представлення тексту може бути перетворено на псевдотрехмерне.

Можливо, це має сенс у деяких завданнях, але практичність зворотної ідеї очевидна: можна розмістити інформацію в перспективі, а при наведенні на неї мишки трансформувати в нормальне відображення. Це компактно і ефектно.

Ці приклади трансформації описано в CSS так:

Застосування властивості transform-origin дозволяє визначити точку, щодо якої буде виконано перетворення. Переміщуючи цю точку, можна керувати центром, до якого здійснюється трансформація CSS.

Функція rotate хоч і має два варіанти - rotceX і rotceY - але без "X" і "Y" має один параметр.

У всіх випадках трансформацію елементів слід налагодити на простих прикладах, щоб уникнути непередбаченого результату. Краще спочатку грамотно сформувати правило і описати властивість для простого елемента, ніж включати відразу в спектр бажаних трансформацій. Правильне формулювання правила і властивості в CSS - запорука успіху і ефективного результату.

Застосування властивості animation

CSS анімація за допомогою animation і @ keyframes доповнює можливості трансформації, дозволяючи перетворити її на реальне представлення через керований рух елемента або кероване перетворення його форми.


Верхній рядок елементів - їх нормальний стан. Перший стовпчик пересувається, другий - обертається, а третій - масштабується. Показано декілька кадрів. Для реалізації цієї функціональності використано наступний код:

Динаміку і тривалість процесу можна встановлювати в animation і @ keyframes. Доступна плавна і ступенева зміна процесу. Можна застосувати рівномірну зміну та рух з прискоренням.

Можливості властивості animation

Властивість animation зазвичай записується одним рядком. У нього входять вісім параметрів:

  • animation-name - ім 'я анімації;
  • animation-duration - тривалість анімації (секунди "" s "", мілісекунди "" ms "");
  • animation-timing-function - тип анимации (ease, linear, ease-out, ease-in, ease-in-out, cubic-bezier);
  • animation-iteration-count - число повторень анімації або infinite;
  • animation-direction - напрямок руху (normal, reverse, alternate, alternate-reverse);
  • animation-play-state - зупинка анімації (running, paused);
  • animation-delay - затримка анімації перед початком відтворення (секунди "" s "", мілісекунди "" ms ");
  • animation-fill-mode - програвати анімацію поза вказаним часом відтворення (
  • none, forwards, backwards, both);

Під час розробки анімації за допомогою animation властивості трансформації вказуються в правилі @ keyframes, яке визначає послідовність перетворення елемента за кроками.

Важливі параметри анімації

Будь-яка анімація має ім 'я, тривалість і тип. За назвою визначено потрібний опис @ keyframes, тривалість визначає час процесу, а тип - варіант руху.


При необхідності рівномірного процесу (рух і/або перетворення) використовується значення linear. Якщо потрібно мати прискорення на початку - ease-out, якщо в кінці - ease-in. Просто ease - це ковзання, а ease-in-out - його більш плавний варіант.

Значення cubic-bezier дозволяє сформулювати складний варіант руху і побудувати більш оригінальний варіант анімації.

На сайті виробника можна вибрати будь-який стандартний варіант руху і спроектувати свій. При натисканні на кнопку "GO!" два квадратики рухатимуться паралельно і можна зіставити відмінності і візуально сформувати потрібну поведінку елемента.

Побудова кадрів анімації

Властивість @ keyframes є "визначником" кадрів (див. приклад вище), через які проходить трансформація елемента. Ідея властивості дуже проста, але можливості вона надає колосальні.

Процес починається з 0% і закінчується на 100% від загального часу, виділеного на анімацію. Можна використовувати тільки кінцеві точки from і to, або 0% і 100%. Більшого ефекту можна досягти, розділивши весь процес анімації/трансформації на ділянки. Крок ділянки може бути будь-яким.


Зазвичай приймається кілька варіантів: 0%, 25%, 50%, 75% і 100%. Іноді достатньо тільки три кадри: 0%, 50% і 100%. Як вчинити в кожному конкретному випадку, залежить від завдання і розробника.

При створенні будь-якого варіанту трансформації слід дотримуватися одного істотного правила. Не завжди допустимо використання JavaScript, особливо це стосується зміни властивостей елементів, наприклад зміна значення властивості background-image.

HTML, CSS і JavaScript чудово поєднуються, але у всіх випадках потрібно враховувати фактичну функціональність кожної цієї складової. Ідеально, коли вони працюють у чіткому поєднанні і не заважають один одному.