Поглед у ЦСС3 2Д трансформације
Тхе Трансформатион модуле је огроман додатак у ЦСС3, потребно је начин на који манипулишемо елементима на веб страници на сљедећи ниво.
Постоје неки експерименти који ме заиста задивљују, примери као што је овај. Међутим, нећемо изградити нешто попут ЦСС-иконе која се може некако претворити у Аутобот, јер може бити претешка и не баш употребљива у стварном животу..
Уместо тога, овај пут ћемо се повући и прегледати основе ЦСС3 2Д Трансформација да видимо како функционише на фундаменталном нивоу.
Тхе Синтак
Модул ЦСС3 Трансформатионс нам у основи дозвољава да трансформишемо елемент у одређеној мери, као што је превођење, скалирање, ротирање и нагињање.
Званична синтакса је трансформ: метод (вредност). Међутим, као и сви други велики ЦСС3 додаци који су још увек у раним фазама, тренутним прегледачима је и даље потребна верзија синтаксе за покретање трансформација. Дакле, комплетна синтакса ће се појавити на следећи начин:
трансформ: метход (валуе); / * В3Ц Оффициал Синтак * / -о-трансформ: метход (валуе); / * Опера 10.5+ * / -мс-трансформ: метода (вредност); / * Интернет Екплорер 9.0+ * / -моз-трансформ: метода (вредност); / * Фирефок 3.6+ * / -вебкит-трансформ: метода (вредност); / * Цхроме / Сафари 3.2+ * /
Такође, метод који се односи на горе је трансформ-функције, који се могу заменити једним од следећег: превести(), Скала(), ротирај () или искривити ().
Вредност
Већина вредности методе ће одговарати Кс-оса и И-оса. Ако се сећате картезијског координатног система из математике у средњој школи, основни принцип је прилично сличан, Кс-оса представља хоризонтал и И-оса представља вертикала лине.
Осим ротације. Тхе ротација ће користити поларне координате који је изражен у ступњевима који се крећу од 0 до 360.
Вредности за све методе могу бити и негативне или позитивне. Само узмите белешку, јер се веб страница чита секвенцијално од врха до дна, што чини И-осу у вебу супротном од оригиналног принципа картезијанских координата. То значи да када додате негативну вредност И-оса, она ће се премјестити на врх.
Коришћење трансформација
Погледајмо сада следећу основну демонстрацију да видимо Трансформацију у акцији.
Преводим
Немојте се замаглити термином превести, неће преводити страни језик. Тхе превести овде је заправо метода за померање елемената у неком правцу.
Метода садржи две вредности; Икс и И. тхе Кс валуе као што смо горе истакли, елемент ће узети хоризонтално; лево или десно, док И вредност ће је узети вертикално на дну или на врху.
Сада ћемо видети неке једноставне демонстрације у наставку:
див ширина: 100пк; хеигхт: 100пк; трансформ: транслате (100пк, 250пк);
Исјечак изнад ће померити елемент за 100пк удесно и 250пк на дно.
див ширина: 100пк; хеигхт: 100пк; трансформ: транслате (100пк, 0);
Исјечак изнад ће померити елемент само десно за 100пк, зато што нулирамо ос И. Затим, ако желимо да померимо елемент улево, потребно је само да поставимо осу Кс у негативу, као што следи:
див ширина: 100пк; хеигхт: 100пк; трансформ: транслате (-100пк, 0);
- "Транслате" демо
Алтернативно, ми смо у могућности да померимо елемент у једном правцу са овим индивидуалним методама; транслатеКс () и транслатеИ (), разлика је да свака од тих метода прихвата само једну вредност.
Дакле, практично говорећи, трансформ: транслате (-100пк, 0) такође је једнако трансформ: транслатеКс (-100пк).
ИИ - Скала
Тхе Скала метода нам омогућава увећајте или смањите елементе из његове стварне величине. Вредност скале је иста као вредност превести горенаведени метод, он такође садржи Кс и И. Једина разлика је што не наводимо јединицу. Ево примера:
див ширина: 100пк; хеигхт: 100пк; трансформација: скала (1.5);
Горњи пример ће увећати див 1.5 или 150% његове стварне величине, и пошто је подједнако скалирамо и за Кс и за И правац, потребно је само да га декларишемо у једној вредности. Можете га и прогласити на овај начин трансформација: скала (1.5,1.5); ако желите више детаља, то ће учинити исто.
Штавише, ако желимо да смањимо елемент, посебно бисмо користили вредност од 0.999 до апсолутне 0, као што је пример испод, што ће смањити величину див за 50% или половину:
див ширина: 100пк; хеигхт: 100пк; трансформација: скала (0.5);
Али будите опрезни, ако поставите вредност као апсолутну “0” тхе див само ће нестати, тако да ако немате ваљани разлог да то учините, не бих препоручио да то учините.
- "Сцале" демо
ИИИ - Ротирај
Као што смо раније поменули у овом посту ротате метода користи поларне координате, тако да је вриједност наведена у ступњевима. Ево два примјера
Исјечак испод ће ротирати див 30 степени у смеру казаљке на сату.
див ширина: 100пк; хеигхт: 100пк; трансформ: ротате (30дег);
Негативна вредност, као што је приказано у доњем примеру, ће ротирати див у супротном смеру (супротно од казаљке на сату) у истом степену.
див ширина: 100пк; хеигхт: 100пк; трансформ: ротате (-30дег);
- "Ротате" демо
ИВ - Скев
Тхе скев метода нам омогућава да створимо неку врсту паралелограма. Она такође садржи две вредности Кс и И осе. Међутим, сама вредност се наводи у степену, уместо линеарних мерења као што их користимо за Скала или превести метода. Ево примера:
див ширина: 200пк; хеигхт: 100пк; трансформ: скев (30дег, 10дег);
- "Скев" демо
В - Вишеструка метода
Тхе трансформисати својство није ограничено на руковање само једним методом, у ствари можемо укључити више метода у појединачне декларације, као што је:
див ширина: 100пк; хеигхт: 100пк; трансформ: транслатеКс (100пк) ротате (45дег);
Горњи исечак ће померити елемент 100пк удесно и истовремено ротирати за 45 степени.
"Мултипле Метход" демо.
Трансформ Оригин
Тхе трансфром-оригин - као што његово име имплицира - користи се за контролу почетне тачке трансформације. Ако изричито не декларишемо ово својство са следећом синтаксу трансформ-оригин: Кс И;, онда ће претраживач узети подразумевану вредност која је 50% за Кс и 50% за И.
Сада, ако одредимо трансформ-оригин до 0 (Кс) 0 (И) трансформација ће почети на врху лево.
Поново, свим претраживачима је и даље потребна префиксна верзија да би назвала ову особину. Дакле, овде је комплетна верзија да би се осигурало да ради у већини тренутних претраживача:
-вебкит-трансформ-оригин: Кс И; -моз-трансформ-оригин: Кс И; -о-трансформ-оригин: Кс И; -мс-трансформ-оригин: Кс И; трансформ-оригин: Кс И;
- "Трансформ-оригин" демо
Закључак
Прошли смо кроз све четири основне методе трансформације; превести, скалирати, ротирати и извртати
Међутим, као што је поменуто, овај модул је још увијек у раној фази, тако да ако ћете примијенити ове методе на сљедећој веб-локацији, провјерите да ли се грациозно деградира за некомпатибилне прегледнике (овдје се не односи на ИЕ6).
На крају, можете погледати све демо датотеке или преузети извор са следећих линкова.
- Демо
- Довнлоад Соурце
