Здравейте скъпи начинаещите уебмастъри.
Редки свойствата на анимацията се, без да трансформират. Нека да разгледаме по-подробно с всички характеристики на този невероятен CSS инструменти, защо и как се прилага.
Всички от следните примери ще работи, когато курсора, така че можете да видите ефекта на трансформиране на собствеността
Като основа вземем единица
В този CSS код, ще замени на трансформиращия собственост на функции (стойности), които носи.
Намаление - Увеличаване
а) се трансформира. скала (0.5); - мащабиране на елементи хоризонтално и вертикално. Той се увеличава броят им е по-голям от един; елемент, и по-малко от един - намалява.
б) се трансформира. scaleX (0.5); - мащабиране на хоризонтално елементи;
да) се трансформира. scaleY (0.5); - везни член вертикално;
а) се трансформира. skewX (30deg); - елемент накланя от предварително определен ъгъл спрямо вертикалата (в този случай при 30 °). елемент Otrtsatelnoe стойност накланя в друга посока;
б) се трансформира. skewY (30deg); - елемент накланя от предварително определен ъгъл в хоризонтално положение;
изместване
а) се трансформира. превеждам (50px); - измества елемент с предварително определена стойност в хоризонтална и вертикална;
б) се трансформира. translateX (50px); - измества елемент хоризонтално. Положителна стойност се измества надясно, отрицателно лявата.
да) се трансформира. translateY (50px); - елемент се измества вертикално. Положителна стойност превключи на отрицателна стойност до;
а) се трансформира. върти (45deg); - въртенето около елемента център (по подразбиране) с предварително определен ъгъл;
б) се трансформира. rotateY (360deg); - въртене елемент около вертикалната ос. Използва се в 3D и за това по-късно;
да) се трансформира. rotateX (360deg); - въртене елемент около хоризонтална ос. Използва се в 3D;
трансформира. матрица (); - Създаване на елемент отражение ефект.
За да се отрази ефектът
тип отражение може да се променя чрез промяна на комбинацията от първите четири цифри от варираща от 1 до -1. пето движи цифрен страни по X оста, шестата ос Y.
превърне в стил. запази-3d; - създава 3D ефект.
координатна точка
трансформиране на произход. х Ш Щ; - определя координатите на точката, в сравнение с центъра за които членът ще се завърти.
Двете стойности се използват от равнина (х у), а 3D три стойности (х Ш Щ)
Това е за начина, по който това е направено.
Сега можете да се свържете с елемент на анимация с дадено време на изпълнение, а след това в правило @keyframes уточни трансформиращите имот до желаната функция в началото и в края на цикъла.
Например: елемент постепенно наклонена по време на анимация
Желая ви успех.
Хайде, това, което е по-интересно
Свързани статии