Анимацията на елементите на страницата може да функционира като независим процес или да се изпълнява, за да се визуализират действията на посетителите. И в двата случая, CSS трансформацията на елемента не засяга общия поток и се изпълнява независимо от съдържанието на страницата като цяло.

Когато се използват правилата и се развива логиката на променящите се елементи, използването на правилни стойности на свойствата и правилата е много важно. CSS трансформацията не дава възможност на разработчика да контролира. Всички трансформации се извършват в съответствие с дадените функции и техните стойности.

Общи правила за преобразуване

Логиката е въплътена в идеята за трансформационната функция, която се състои в изкривяване на елемента. Елементите на дадена страница са правоъгълна област, дори и да е представена от плавни графики вътре в нея. Чрез промяна на размерите на страните или тяхното изместване (изместване) могат да бъдат:

формирана динамика;

перспективата е създадена;

Обемът се изпълнява.

Във всеки случай, всички трансформации се случват на равнина, но резултатът е възможен както в 2D, така и в 3D дисплей. В следващия пример има четири области, всяка с CSS - трансформация. Горният ред на изображенията е оригиналът, долният ред е резултат от използването на функции. За да демонстрирате основните функции, използвайте следното описание на CSS и покажете вмъкването в HTML на страницата. В този пример, трансформация се случва, когато мишката над елемент и се присвоява чрез псевдо-клас: hover. По отношение напреобразува свойства при използване на функцията за превод, трябва да се отбележи, че CSS трансформацията може да бъде заменена от лявата и горната свойства. Относно изкривяването на функцията за изкривяване - резултатът може да е непредсказуем.


Счита се, че изкривяването се използва рядко, но с правилното и всеобхватно прилагане на CSS анимация с изкривяване ще бъде възможно да се изгради динамика в триизмерното пространство при преместване на елемент. Например, "космически кораб в орбита" в контекста на уеб страница може да бъде движение на стоки в магазина в пространството на магазина.

Перспектива в трансформацията

Трансформацията на текст в CSS може да даде специален ефект при прилагането на перспектива. Примерът показва как нормалното текстово представяне може да се преобразува в псевдотример. Може би това има смисъл в някои задачи, но практичността на реципрочната идея е очевидна: можете да поставите информация в бъдеще, и ако задържите мишката, за да я превърнете в нормален дисплей. Той е компактен и впечатляващ. Тези примери за трансформация са описани в CSS, както следва: Използването на свойството transform-origin ви позволява да определите точката, в която ще се извърши преобразуването. С преместването на тази точка можете да контролирате центъра, за който се извършва CSS трансформацията. Функцията за въртене, въпреки че има две опции - rotateX и rotateY - но без "X" и "Y" има един параметър. Във всички случаи преобразуването на елементи трябва да бъде организирано с прости примери, за да се избегнат неочаквани резултати. По-добре е първо да формулирате правилно правилото и да опишете имотапрост елемент, отколкото да се включи незабавно в обхвата на желаните трансформации. Правилната формулировка на правилата и CSS свойствата е ключът към успеха и ефективните резултати.

Прилагане на свойствата на анимацията

CSS анимацията, използваща анимация и @keyframes, допълва възможностите за трансформация, позволявайки тя да бъде трансформирана в реално представяне чрез движение с контролиран елемент или контролирана трансформация на неговата форма.