Динамичен CSS: трансформация на обекти

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

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

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

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

Чрез промяна на размерите на страните на зоната или тяхното изместване (изместване) може да бъде:

• динамиката се формира;
• перспективата се формира;
• обемът е изпълнен.

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

Следният пример показва четири области, всяка с CSS трансформация.

Най-горният ред от снимки е оригинал, а долният ред е резултат от прилагането на функциите. За да покажете основните функции, използвайте следното описание на CSS и показва вмъкването в HTML на страницата.

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

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

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

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

Трансформацията на текста в CSS може да даде специален ефект при прилагане на перспектива. Примерът показва как нормалното представяне на текст може да бъде трансформирано в псевдо-3D текст.

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

Тези примери за трансформация са описани в CSS, както следва:

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

Функцията за завъртане има две опции - rotateX и rotateY - но без "X" и "Y" има един параметър.

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

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

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

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

Динамиката и продължителността на процеса могат да бъдат зададени в анимация и @ ключове. Предлага се постепенна и постепенна промяна на процеса. Можете да прилагате еднообразна промяна и движение с ускорение.

Анимация с характеристики на имота

Анимационната собственост обикновено е написана на един ред. Той включва осем параметъра:

• име на анимацията - името на анимацията;
• анимация - продължителност - продължителността на анимацията (секунди "s", милисекунди "ms");
• анимация - функция за синхронизация - вид анимация (лекота, линейна, улесняване, улесняване, лекота на излизане, кубичен бизир);
• анимация-итерация-броя - броя на повторенията на анимацията или безкраен;
• посока на движение (нормална, обратна, алтернативна, алтернативна);
• анимация-игра-състояние - спиране на анимацията (бягане, пауза);
• забавяне на анимацията - забавяне на анимацията преди началото на възпроизвеждането (секунди "s", милисекунди "ms");
• режим на анимация - запълване - възпроизвеждане на анимацията извън определеното време за възпроизвеждане (
• никой, напред, назад, и двете);

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

Важни опции за анимация

Всяка анимация има име, продължителност и тип. Името определя изискваното описание на @keyframes, дължината определя времето на процеса и типът определя варианта за движение.

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

Стойността на cubic-bezier ви позволява да формулирате сложна версия на движението и да създадете по-оригинална версия на анимацията.

На уеб сайта на производителя можете да изберете всяка стандартна опция за трафик и да проектирате свой собствен. Когато кликнете върху бутона "GO!", Два квадрата ще се движат паралелно и можете да сравните разликите и визуално да оформят желаното поведение на елемента.

Изграждане на анимационни рамки

Характеристиката @keyframes е "детерминанта" на кадрите (виж примера по-горе), чрез който елементът се трансформира. Идеята за имот е много проста, но предоставя огромни възможности.

Процесът започва от 0% и завършва на 100% от общото време, разпределено за анимацията. Можете да използвате само крайните точки от и до или 0% и 100%. По-голям ефект може да се постигне чрез разделяне на целия процес на анимация / трансформация на секции. Стъпката на даден сайт може да бъде всяка.

Обикновено се приемат няколко опции: 0%, 25%, 50%, 75% и 100%. Понякога са достатъчни само три кадъра: 0%, 50% и 100%. Как да се действа във всеки отделен случай, зависи от задачата и разработчика.

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

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