У овом чланку ћемо разумети Трансформ Ин детаљно и прате детаљним практичним демонстрацијама. Следећи смерници ће бити обрађени у овом чланку,
Са напретком у функционалностима веб странице, подједнако је важно обезбедити паметне интеграције на вашој веб локацији како би је учиниле привлачном и бољом. Потребно је сат времена да додате разне ЦСС елементе који допуњују вашу веб локацију.
Људи се клоне веб локација које се заправо не свиђају масама. Па, како да покушате да трансформишете неке од елемената и улепшате свој ЦСС са мањом вредношћу компресије.
Да бисмо испунили сличне потребе, трансформисали смо ЦСС својство које трансформише елементе било искривљавањем, ротирањем, скалирањем или транслацијом.
Настављамо са овим чланком о Трансформ Ин ЦСС
Шта је трансформиши ЦСС?
Трансформација ЦСС елемента значи пружање ивице у 2Д или 3Д облику. Визуелно мења стил елемента.
2Д трансформација ради на Кс и И осема. Можете унети било коју ивицу или структуру на обе осе да бисте извршили промене. Док је за 3Д трансформацију потребно радити на Кс, И, као и на З оси како би се обезбедила потребна дубина.
Својства ЦСС 2Д трансформације:
| Функција | Опис |
матрица ( н, н, н, н, н, н ) | Матрица од шест вредности |
превести( к, и ) | Омогућава елементу да се креће дуж Кс- и И-осе |
транслатеКс ( н ) | Омогућава елементу да се креће дуж Кс оси |
транслатеИ ( н ) | Омогућава елементу да се креће дуж И осе |
Скала( к, и ) | Мења ширину и висину елемената |
сцалеКс ( н ) | Мења ширину елемента како направити низ објеката у јави |
скалаИ ( н ) | Мења висину елемента |
ротирати ( угао ) | Омогућава ротирање елемента под углом који је наведен у параметру |
искривити ( угао к, угао и ) | Коси елемент дуж Кс- и И осе |
скевКс ( угао ) | Нагиње елемент дуж Кс-осе |
искривљено ( угао ) | Коси елемент дуж И осе |
Својства ЦСС 3Д трансформације:
Имовина | Опис |
трансформисати | Примењује 2Д или 3Д трансформацију на елемент |
трансформација-порекло | Омогућава вам промену положаја на трансформисаним елементима |
трансформисати-стил | Одређује како се угнежђени елементи приказују у 3Д простору |
перспектива | Одређује перспективу приказа 3Д елемената |
перспектива-порекло | Одређује положај дна 3Д елемената разлика између замене и преоптерећења |
видљивост на позадини | Дефинише да ли елемент треба да буде видљив ако није окренут према екрану |
На пример:
цсс .елемент {ширина: 20пк висина: 20пк трансформација: скала (20)}Сада, када то учините, дефинисани елемент ће бити увећан за 20 пута.
И не само ово, можете и скалирати осе за хоризонтално и вертикално скалирање.
трансформиши: скалаКс (2) трансформиши: скалаИ (.5)
Да бисте обезбедили одговарајућу трансформацију у свим прегледачима, можете:
див {-вебкит-трансформирај: скала (1.5) -моз-трансформиши: скала (1.5) -о-трансформирај: скала (1.5) трансформиши: скала (1.5)}Својство трансформиши ЦСС побољшава координатни простор нивоа визуелног обликовања ЦСС-а.
Шта је ниво визуелног форматирања?
Ниво визуелног форматирања значи обраду документа и његово визуелно представљање на медијским платформама. Визуелним форматирањем можете сваки елемент трансформисати као модел који се слаже са ЦСС моделом оквира. ЦСС модел оквира дефинише елемент у стандардном правоугаоном формату оквира који дефинише величину, положај и својства.
Белешка: Могу се трансформисати само трансформишући елементи.
Настављамо са овим чланком о Трансформ Ин ЦСС
Која су различита својства трансформације?
Погледајмо сва својства трансформисања:
1.размера (): Скалирање значи промену величине елемента било хоризонтално или вертикално.
За вертикално скалирање:сцалеКс
За хоризонтално скалирање:скалаИ
За елемент такође можете променити величину фонта, подлоге, висину или ширину. Подразумевана вредност је 1, што такође значи да се даје 0,5, јер је вредност преполовљује, а 2 даје двоструко веће скалирање.
2. искривити (): Особина искоса омогућава кориснику да нагне елемент удесно или улево од једне координатне тачке. То је готово као претварање правоугаоника у паралелограм. Можете искривити елемент према његовим координатама.
Пример:
.елемент {трансформација: скевКс (25дег)} .елемент {трансформација: скевИ (25дег)Када то учините, елемент се коси 25 степени хоризонтално и вертикално помоћу скевКс или скевИ.
3. ротирати ( ) : Помоћу овог својства можете ротирати елемент у смеру казаљке на сату. Можете га ротирати за 180 степени или 360 степени да бисте га вратили на првобитно место.
.елемент {трансформиши: ротирај (25дег)}Да бисте такође обезбедили ротацију, можете да користите било коју од три димензије: ротатеКс, ротатеИ или ротатеЗ.
баш на време компајлер Јава
4. преведи ( ) : Елемент можете правилно преместити наопако или бочно.
.елемент {трансформиши: преведи (20пк, 10пк)}Преводилац ће померити објекат / елемент наведен наопако или бочно. Прва наведена вредност помера одељак удесно (негативна ће га померати улево), а друга вредност помера га надоле (специфицирање негативне вредности помераће га према горе).
Ако би вас ово могло збунити, примените Кс осу да бисте променили положај елемента хоризонтално и И осе да бисте променили положај вертикално. Невероватни аспект својства трансформ је тај што ће примена трансформисања омогућити само померање елемента, задржавајући сваки други елемент или текст нетакнутим. Удаљеност се обично узима у пикселима или процентима.
На пример:
.елемент {трансформиши: транслатеКс (вредност) трансформиши: транслатеИ (вредност)}5. перспектива (): Можете пружити дубину перспективе елемента. Омогућава давање 3Д трансформације елементу чинећи га кубним у трансформацији.
транслате3д (к, и, з)
транслатеЗ (з)
транслате3д (к, и, з) транслатеЗ (з)
Увођење з осе даје елементу 3Д визуелизацију. транслатеЗ () помера елемент према гледаоцу, док га негативна вредност одмиче.
6. матрица () : Комбинујте све трансформације у једну.
ротирај (45дег) преведи (24пк, 25пк)
Примена матрице () комбинује сва својства трансформације у једном низу.
Примена својстава трансформације може у великој мери побољшати ваш елемент, а тиме и привлачност ваше веб локације. Пробајте их!
Ово нас доводи до краја овог чланка о Трансформ Ин ЦСС.
Ако сте заинтересовани да сазнате више о веб-развоју, погледајте Едурека. Обука за сертификацију за веб развој ће вам помоћи да научите како да креирате импресивне веб локације помоћу ХТМЛ5, ЦСС3, Твиттер Боотстрап 3, јКуери и Гоогле АПИ-ја и примените их на Амазон Симпле Стораге Сервице (С3).
Ако сте и даље заинтересовани Ако имате било какво питање, можете га објавити у одељку за коментаре на овом блогу „Шта је ЦСС“ и јавићемо вам се што је пре могуће.