Практиката за използване на правилото за трансформиране на CSS

Често е необходимо да се съживят елементите на страницата, без да се прибягва до трудолюбиви употреби на jаvascript. Правилото за трансформиране на CSS е удобно средство за създаване на сложна динамика, която няма да изисква много усилия.

Всички основни действия за промяна на елемента: позиция, размери, въртене, извивка и въртене - са налице, когато се прилагат към основните елементи на HTML оформлението и в комбинация помежду си ви позволяват да създавате сложна динамика.

Основни възможности на правилото за трансформация

Правилото за трансформиране на CSS е предназначено да използва прости трансформации на елементите на страницата и се използва много просто:

• трансформира: няма;
• трансформация: функция ();
• функцията трансформация: функция () () ();

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

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

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

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

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

Комбиниране на елементи по време на трансформацията

Трансформацията на анимацията CSS е разрешена чрез няколко функции в едно правило. Можете да зададете положителни и отрицателни стойности на трансформациите, важно е те да имат смисъл.

Примерът показва как изображението се променя, когато мишката се движи, ако правилото за трансформация включва едновременно:

• мащабиране;
• извъртане
• измести.

Тройният ефект е лесен за планиране, но често без дълга селекция от стойности е абсолютно необходимо. Едно нещо е, когато едно правило може точно да определи необходимите промени: те са известни. Друга е, когато трябва да измислите динамика според значението на елемента.

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

В примера, полученото решение прилича на трансформация в триизмерното пространство, но това не е от значение за правилата за трансформиране на CSS 3D. Отчитането на оста Z и манипулирането с гърба на елемента е отделна група свойства и правила.

Въпреки това, независимо от графичната идея, всички трансформации се правят в равнината, ефектите се формират поради визуалното възприятие и правилната промяна във формата на елементите. Съдържанието на елементите и структурата на линиите имат значение.

Характеристики на правилата за CSS

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

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

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

Нещо повече, размерите на блока, неговото съдържание, формата и цвета на вътрешните елементи са от съществено значение. Използвайки правилата за прозрачност (непрозрачност), можете да получите сложни изображения и да ги наслагвате един върху друг - сложни ефекти.

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

Трябва да се има предвид, че промяната на съдържанието на елемента, особено на собствеността на изображението, може да доведе до "старт" - нарушение на необходимата логика на трансформацията поради технически характеристики (браузър, протокол, сървър и други). Има смисъл да скриете елемента, преди да промените съдържанието му: да се показва и да продължи, когато процесът на надстройване вече е завършен.

Участие на сървъра в трансформацията

Ако разработчиците са отишли ​​достатъчно далеч от необходимостта от пълна актуализация на страницата и технология като AJAX се е превърнала в норма за показване и актуализиране на елементите на страницата, тогава се очаква, че динамиката на листа стил ще се промени по време на работата на уеб ресурса.

Традиционният подход, когато страниците са били създадени от разработчика и сайтът е пуснат в действие, както е, вече е остарял. Защо да не развиете целия набор от файлове в сайта, в резултат на динамиката на диалога с посетителя: "в движение".

Използването на jаvascript + AJAX е динамиката на елемент, но използването на сървърния език за промяна на CSS файл е разумна допълнителна възможност. Посетителите се различават не само в техния темперамент, но и във функционалността, която очакват, и възможността за показване.

Предлагайки необходимата функционалност във формат на адаптивна динамика (промяна на правилата на CSS в движение), можете да постигнете голям успех и да промените рейтинга на уеб ресурса към по-добро.