Привіт шановні початківці веб-майстри.
Рідкісна анімація обходиться без властивості transform. Давайте детально розглянемо всі можливості цього дивного інструмента CSS, для чого і як він застосовується.
Всі наступні приклади будуть працювати при наведенні курсору, щоб Ви могли подивитися дію властивості transform
За основу візьмемо блок
В цей css код будемо підставляти властивість transform з функціями (значеннями) які воно виконує.
Зменшення - збільшення
а) transform. scale (0.5); - масштабує елемент по горизонталі і вертикалі. Число більше одиниці збільшує; елемент, а менше одиниці - зменшує.
б) transform. scaleX (0.5); - масштабує елемент по горизонталі;
в) transform. scaleY (0.5); - масштабує елемент по вертикалі;
а) transform. skewX (30deg); - нахиляє елемент на заданий кут по вертикалі (в даному випадку на 30 °). Отрцательное значення нахиляє елемент в інший бік;
б) transform. skewY (30deg); - нахиляє елемент на заданий кут по горизонталі;
переміщення
а) transform. translate (50px); - зрушує елемент на задане значення по горизонталі і вертикалі;
б) transform. translateX (50px); - зрушує елемент по горизонталі. Позитивне значення зрушує вправо, негативне вліво.
в) transform. translateY (50px); - зрушує елемент по вертикалі. Позитивне значення зрушує вниз, від'ємне значення вгору;
а) transform. rotate (45deg); - поворот елемента навколо центру (за замовчуванням) на заданий кут;
б) transform. rotateY (360deg); - поворот елемента навколо вертикальної осі. Застосовується в 3D і про це нижче;
в) transform. rotateX (360deg); - поворот елемента навколо горизонтальній осі. Застосовується в 3D;
transform. matrix (); - створює ефект відображення елемента.
Для ефекту віддзеркалення в
Вид відображення можна змінювати змінюючи комбінацію перших чотирьох цифр змінюючи їх від 1 до -1. П'ята цифра рухає елемент по осі Х, шоста по осі Y.
transform-style. preserve-3d; - створює 3D ефект.
точка координат
transform-origin. x y z; - задає координати точки відносно центру, навколо якої буде обертатися елемент.
У площині використовуються два значення (x y), в 3D три значення (x y z)
Ось приблизно так все і робиться.
Тепер Ви можете до елементу підключити анімацію до заданого часу виконання, а потім в правилі @keyframes вказати властивість transform з потрібною функцією на початку і в кінці циклу.
Наприклад: елемент буде поступово нахилятися протягом анімації
Бажаю творчих успіхів.
А ну-ка, що там ще цікавого