Результат даного уроку працює в браузерах Safari, Chrome, Opera, Firefox, починаючи з версії 4 (де побачите трансформації, але без анімації). Також, за допомогою браузерного префікса -ms-, ви зможете побачити позитивні результат в IE, починаючи з 9-ої версії.
Для реалізації CSS анімації необхідно виставити спеціальні настройки трансформації, які будуть реагувати на події миші. Також необхідно вказати спеціальну функцію, яка буде відповідати за час виконання анімації.
Для роботи трансформацій в Firefox і Opera просто замініть префікс -webkit на -moz і -o. Для IE - на -ms.
1. Введення в CSS трансформації
CSS трансформації використовують для зміни виду, повороту і інших перетворень елемента. Всі ці настройки виставляються в звичайних таблицях стилів, і коли ви відкриваєте сторінку, то вже бачите готовий результат трансформації. Для того щоб побачити саме перетворення з одного виду в інший (анімацію трансформації), до елементу можна прикрутити якусь подію (наприклад, подія mouseover);
У прикладі, показаному нижче, ми розташували 4 абсолютно однакових div-а з рамкою в 2px. Для трансформації даних елементів в браузерах, які працюють на webkit, додаємо префікс -webkit-transform:
Переміщений вправо -webkit-transform: translate (3em, 0);
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!