Практыка выкарыстання правілы transform CSS

Дата:

2019-01-02 10:00:16

Прагляды:

441

Рэйтынг:

1Любіць 0Непрыязнасць

Доля:

Table of contents:

Часта неабходна ажывіць элементы старонкі, не звяртаючыся да працаёмкім варыянтам выкарыстання JavaScript. Правіла transform CSS - зручны інструмент для надання складанай дынамікі, на стварэнне якой не спатрэбіцца шмат высілкаў.

transform css

Усе асноўныя дзеянні па змене элемента: становішча, памеры, павароты, скрыўленне і кручэнне — даступныя ў прымяненні да асноўных элементаў HTML-вёрсткі, а ў камбінацыі адзін з адным дазваляюць ствараць складаную дынаміку.

Асноўныя магчымасці правілы трансфармацыі

Правіла transform CSS прызначана для выкарыстання простых трансфармацый элементаў старонкі і выкарыстоўваецца вельмі проста:

  • Transform: none;
  • Transform: функцыя ();
  • Transform: функцыя () функцыя () функцыя ();

У прыведзеным ніжэй прыкладзе пералічаныя асноўныя функцыі, якія можна выкарыстоўваць для пераўтварэння элементаў, паказана іх дзеянне на прыкладах.

анімацыя transform css

Простыя прымянення трансфармацый звязаныя з кнопкамі і элементамі рэалізацыі дыялогу з наведвальнікам. Практычна выкарыстанне дынамічных эфектаў для суправаджэння перасоўванняў мышкі або прыцягненне ўвагі да акцый па паслугах або таварах, прапанаваных уладальнікам рэсурсу.

Трансфармацыя запатрабаваная ў меню, калі наведвальнік яшчэ не выбраў патрэбны кірунак дзеянняў, але мышка ўжо на элеменце: пункце меню. У гэтым выпадку што-то можа трансфармавацца: павялічыцца ў памеры, нахіліцца, павярнуцца ці інакш «даць зразумець», што старонка «актыўная» і гатовая выканаць дзеянне.

анімацыя transform css

Зручна прымяненне правілы transform CSS для стварэння падказак і каментароў да элементаў старонкі. Наведвальнік не заўсёды арыентуецца на старонцы, асабліва калі ён прыйшоў упершыню. Па традыцыі, кожны распрацоўшчык сайта лічыць, што дызайн вэб-рэсурсу і дыялог з наведвальнікам - гэта яго сфера кампетэнцыі.

Больш:

Lenovo v580c: падрабязны агляд

Lenovo v580c: падрабязны агляд

Сёння мы вырашылі напісаць пра ноўтбуку Lenovo v580c. Агляд будзе падрабязным, так як гэты партатыўны ПК серыі IdeaPad мае высокую папулярнасць, але не многія ведаюць, чым жа прыцягвае гэта прылада пакупнікоў. Мадэль з'яўляецца хуткай і змяшчае ў саб...

Брандмаўэр - што гэта? Стандартны абаронца ПК

Брандмаўэр - што гэта? Стандартны абаронца ПК

Брандмаўэр – што гэта такое? Карысная функцыя ў аперацыйнай сістэме або малаэфектыўныя сродак абароны? Перш чым адказаць на гэтае пытанне, нам трэба высветліць, што робіць кампутар і як правільна яго наладзіць.Агульныя звесткіДля паспяховай пра...

"Аблівіян": праходжанне гульні. Кіраўніцтва і парады па праходжанні гульні "Аблівіян"

The Elder Scrolls IV: Oblivion — ролевая гульня ад кампаніі Bethesda Games Studios. Адразу ж пасля рэлізу у 2006 годзе яна стала вельмі папулярнай. Сюжэт заснаваны на супрацьстаянні галоўнага героя і культу Прынца Разбурэння, які плануе адкрыць...

З пункту гледжання наведвальніка, яму вырашаць, які функцыянал ён чакае ад сайта, на які прыйшоў, якім павінен быць дызайн і дыялог. Калі што-то тут не падабаецца, ён знойдзе сабе тое, што падабаецца на іншым вэб-рэсурсе.

Сумяшчэнне элементаў пры трансфармацыі

Анімацыя transform CSS дапускаецца праз некалькі функцый у адным правіле. Можна задаваць станоўчыя і адмоўныя значэння трансфармацый, важна, каб яны мелі сэнс.

У прыкладзе паказана, як мяняе свой аблічча карцінка пры навядзенні мышкі, калі правіла трансфармацыі ўключае ў сябе:

  • маштабаванне;
  • паварот
  • зрух.

Патройны эфект спланаваць лёгка, але часта без доўгага падбору значэнняў не абысціся. Адна справа, калі адным правілам можна дакладна вызначыць патрэбныя змены: яны вядомыя. Іншае - калі даводзіцца прыдумляць дынаміку паводле сэнсу элемента.

 css transform style

У некаторых выпадках лепш сумясціць, напрыклад: два дзіва ўкладзеныя сябар у сябра. Вонкавым прызначанае адно правіла трансфармацыі, ўнутранага - іншае. Калі агульная логіка патрэбных змяненняў будзе вызначана, то можна яе перанесці на правіла аднаго элемента.

У прыкладзе, выніковае рашэнне нагадвае пераўтварэнне ў трохмернай прасторы, але гэта не мае адносіны да правіл CSS 3D transform. Ўлік восі Z і маніпуляцыі з зваротнай бокам элемента - гэта асобная група уласцівасцяў і правілаў.

Аднак, якая б ні была графічная ідэя, усе трансфармацыі вырабляюцца на плоскасці, эфекты ўтвараюцца за кошт візуальна ўспрымання і карэктнага змены формаў элементаў. Змест элементаў і малюнак ліній маюць значэнне.

Асаблівасці правілаў CSS

Па агульнаму правілу CSS, transform style - гэта статычная логіка пераўтварэнняў элементаў, алгарытм якой не можа быць зменены пасля таго, як набор правілаў сфармуляваны.

Гэта не выходзіць за рамкі канцэпцыі каскадных табліц стыляў, але ў кожным канкрэтным ужыванні даводзіцца ўлічваць той фактар, што дынаміка тут не мае ні падзей, ні ўмоў, ні магчымасці маніпуляваць самім працэсам.

Распрацоўшчык можа толькі сфармуляваць жаданае правіла transform, і CSS выканае яго ў дакладнасці. Змяніць потым або ў працэсе функцыянавання вэб-рэсурсу будзе нічога нельга.

css 3d transform

Больш за таго, маюць істотнае значэнне памеры блока, яго змест, форма і колер ўнутраных элементаў. Выкарыстоўваючы правілы празрыстасці (opacity), можна атрымліваць складаныя малюнкі, а накладваючы іх адзін на аднаго - складаныя эфекты.

Істотным акалічнасцю з'яўляецца некіравальныя ўсіх трансфармацый. Ўсе правілы выконваюцца пэўнымі алгарытмамі, воспринимающими толькі тыя значэнні, якія указаны ў параметрах функцый пераўтварэнні. Правільнае спалучэнне функцый і іх значэнняў вызначае выніковы алгарытм трансфармацыі.

Варта ўлічваць, што змяненне зместу элемента, асабліва ўласцівасці background-image, можа прывесці да «вздрагиванию» - парушэння патрэбнай логікі трансфармацыі за кошт тэхнічных асаблівасцяў рэалізацыі (браўзэр, пратакол, сервер, іншае). Мае сэнс хаваць элемент перад змяненнем яго зместу: паказваць і працягваць, калі працэс абнаўлення ўжо завершаны.

Удзел сервера ў трансфармацыі

Калі ад неабходнасці поўнага абнаўлення старонкі распрацоўшчыкі сышлі досыць даўно і тэхналогіі тыпу AJAX сталі нормай для адлюстравання і абнаўлення элементаў старонкі, то цалкам чаканай з'яўляецца дынаміказмяненняў табліц стыляў у працэсе працы вэб-рэсурсу.

Традыцыйны падыход, калі старонкі фармаваліся распрацоўшчыкам і сайт здаваўся ў эксплуатацыю як ёсць - ужо несучасна. Чаму б не распрацоўваць ўвесь камплект файлаў сайта, як вынік дынамікі дыялогу з наведвальнікам: «на лета».

 css transform style

Прымяненне JavaScript + AJAX - гэта дынаміка элемента, але выкарыстанне сервернага мовы для змены файла CSS - цалкам разумная дадатковая магчымасць. Наведвальнікі адрозніваюцца не толькі па тэмпераменце працы, але і па той функцыянальнасці, якую яны чакаюць і здольнасці яе адлюстравання.

Прапаноўваючы неабходны функцыянал ў фармаце адаптуецца дынамікі (змяняючы правілы CSS на лета), можна дасягнуць вялікіх поспехаў і змяніць рэйтынг вэб-рэсурсу ў лепшы бок.


Article in other languages:

AR: https://tostpost.com/ar/computers/13026-css.html

DE: https://tostpost.com/de/computer/23330-die-praxis-der-verwendung-von-regeln-transform-css.html

En: https://tostpost.com/computers/12353-the-practice-of-using-transform-css-rules.html

ES: https://tostpost.com/es/los-ordenadores/23355-la-pr-ctica-de-la-utilizaci-n-de-las-reglas-de-transformaci-n-de-css.html

HI: https://tostpost.com/hi/computers/13046-the-practice-of-using-transform-css-rules.html

JA: https://tostpost.com/ja/computers/13048-css.html

KK: https://tostpost.com/kk/komp-yuterler/23313-praktika-paydalanu-erezhes-transform-css.html

PL: https://tostpost.com/pl/komputery/23269-praktyka-stosowania-zasady-transform-css.html

PT: https://tostpost.com/pt/computadores/23270-a-pr-tica-de-usar-as-regras-de-css-transform.html

TR: https://tostpost.com/tr/bilgisayarlar/23318-pratik-kullan-m-kurallar-css-transform.html

UK: https://tostpost.com/uk/komp-yuteri/23299-praktika-vikoristannya-pravila-transform-css.html

ZH: https://tostpost.com/zh/computers/13802-css.html






Alin Trodden - аўтар артыкула, рэдактар
"Прывітанне, Я Алін Тродден. Я пішу тэксты, чытаю кнігі і шукаю ўражанні. І я нядрэнна ўмею распавядаць вам пра гэта. Я заўсёды рады ўдзельнічаць у цікавых праектах."

Заўвага (0)

Гэтая артыкул не мае каментароў, будзьце першым!

Дадаць каментар

Навіны

Што рабіць, калі адмоўлена ў доступе да скачанному файла?

Што рабіць, калі адмоўлена ў доступе да скачанному файла?

На дадзены момант торэнт-кліенты лічацца ледзь ці не абавязковым дадаткам да браўзэра. Спампоўваць дробныя файлы апошнія сее-як навучыліся, але калі справа даходзіць да файла вагой у пару гігабайт, тут ужо без торэнта не абысціся....

Праходжанне

Праходжанне "Ведзьмака", адной з лепшых RPG сучаснасці

Напэўна, многія пагодзяцца з выказваннем аб тым, што цікавыя гульні праходзяцца на адным дыханні за пару дзён ці тыдзень, у залежнасці ад яе працягласці. Менавіта так можна апісаць праходжанне "Ведзьмака", а дакладней, яго другой ...

Майнинг - што гэта? Майнинг на працэсары. Заробак на майнинге

Майнинг - што гэта? Майнинг на працэсары. Заробак на майнинге

Развіццё чалавечай цывілізацыі немагчыма ўявіць без грошай. Без гэтага універсальнага меркі кошту тавараў і паслуг. У якасці грошай на кожным этапе чалавечага развіцця выкарыстоўваліся розныя прадметы, такія як зброя, камяні, прад...

МФУ Samsung SCX-3405W: характарыстыкі і водгукі

МФУ Samsung SCX-3405W: характарыстыкі і водгукі

Просты чорна-белы шматфункцыянальны лазерны прынтэр можа спатрэбіцца ў невялікай ці хатнім офісе, дзе каляровая друк не з'яўляецца абавязковым патрабаваннем, але неабходна высокую якасць тэксту. Samsung SCX-3405W – гэта бесп...

Як адфарматаваць флешку праз камандную радок і якія ёсць спосабы?

Як адфарматаваць флешку праз камандную радок і якія ёсць спосабы?

Здымныя USB-флэш-назапашвальнікі даводзіцца фарматаваць даволі часта, прычым не толькі для поўнай ачысткі іх ад наяўнай інфармацыі, але і для стварэння загрузных носьбітаў або ў выпадку пашкоджанні файлавай сістэмы з прычыны якіх-...

Як праверыць сумяшчальнасць мацярынскай платы і аператыўнай памяці: некалькі простых спосабаў

Як праверыць сумяшчальнасць мацярынскай платы і аператыўнай памяці: некалькі простых спосабаў

Верагодна, кожны карыстальнік сучаснага кампутара, які спрабуе яго мадэрнізаваць з мэтай павышэння хуткадзейнасці за кошт устаноўкі дадатковых планак аператыўнай памяці, ведае ці, па меншай меры, здагадваецца, што адной толькі куп...