Практика пайдалану ережесі transform CSS

Күні:

2018-12-31 09:50:15

Hits:

597

Рейтинг:

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 кеңінен танымал, бірақ көпшілігі біледі, бұл тартады бұл құрылғы сатып алушылар. Моделі болып табылады жылдам және қамтиды көптеген оң қасиеттерді, с...

Таңдаймыз арналған модем ноутбука. Бірнеше ұсынымдар жаңа бастаған пайдаланушылар үшін

Таңдаймыз арналған модем ноутбука. Бірнеше ұсынымдар жаңа бастаған пайдаланушылар үшін

 Қазіргі заманғы технологиялар бір орында тұрмайды, үнемі дамып келеді. Бірінші кезекте, бұл байланысты, бұл жыл сайын қажеттілігін ДК пайдаланушылардың үнемі өсіп, өндірушілер әр түрлі құрылғыларды барынша қанағаттандыруға тырысады бұл қажеттіл...

Ксеро-көшірме қағазы: қолдану және сипаттамалары

Ксеро-көшірме қағазы: қолдану және сипаттамалары

Қағаз болып саналады үлкен сұранысқа ие. Ол стандартты өлшемдері сәйкес келетін белгілеген форматтарға. Мысалы, парақтар А4 жүргізіледі параметрлерімен 297 210 мм. қалыңдығы құрайды, 0,02 - 0,03 мм. ксеро-көшірме қағазы кез келген басқа сияқты, ие, н...

тұрғысынан келуші, оған шешуге қандай функционал ол күтеді сайта, ол келді, қандай болуы тиіс дизайн және диалог. Егер мұнда ұнайды, ол тапса, онда өзіне ұнайтын, басқа веб-ресурсында жариялайды.

Совмещение элементтерінің кезінде трансформация

Анимация 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

BE: https://tostpost.com/be/kamputary/23317-praktyka-vykarystannya-prav-ly-transform-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

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-флеш-жинақтағыш келеді форматировать жиі ғана емес, толығымен тазалау үшін оларды қолда бар ақпарат, бірақ және жасау үшін тиегіш тасығыштардың немесе бүлінген жағдайда, файлдық жүйенің салдарынан қандай да бір ақаула...

Қалай үйлесімділік ана ақысын және ram: бірнеше қарапайым тәсілдері

Қалай үйлесімділік ана ақысын және ram: бірнеше қарапайым тәсілдері

Бәлкім, әрбір қолданушы заманауи компьютер, пытающийся оның жаңғырту арттыру мақсатында тез орнату есебінен қосымша тақтайшалар ram, біледі, немесе, кем дегенде, мұны білмейді, бұл бір ғана сатып алуға жаңа модуль және вставкой он...