Трансформишите ЦСС: теорија и примери трансформисаних објеката

Трећа верзија каскадних стилских табела увела је нова својства за објекте веб страница. Ово је могућност креирања блокова са углађеним угловима, подешавање сенки, додавање транспарентности и градијента, подешавање анимације. Ово последње је вредно помињати детаљније. Ако је раније, да би се створила илузија кретања, на странице додаване гиф датотеке, које су морале бити посебно нацртане, онда сада трансформацијски ЦСС атрибут аутоматски извршава све акције за анимирање објеката. Остаје да научите како да га користите.

Карактеристике објекта

Обично се објектима при претварању миша прибегава. Постављен је за псеудо класу под називом : ховер . Промене утичу само на један елемент веб странице, без утицаја на остатак.

Разматрани параметар стилова је често збуњен са другим - тект-трансформ . ЦСС јасно разликује ове атрибуте. Потоњи дефинише стил писања текста и односи се само на параграфе веб странице, док се трансформација у свом чистом облику користи за све елементе.

Можете додати било којем објекту:

• кретање дуж равне линије (хоризонтално, вертикално, дијагонално);
• ротација (специјални случај - нагиб);
• скалирање;
• комбинација наведених ефеката.

Поред илузије кретања три врсте, својство вам омогућава да поставите рефлексију, помак и перспективу. За напредне, параметар је дат у облику матрице.

Трансформација се врши у односу на центар елемента. Ако је потребно, референтна тачка се помера. Параметар трансформационог извора: а б ц помера центар објекта у односу на тродимензионални киз координатни систем .

Хоризонтално кретање

Најједноставнији тип кретања је хоризонтално, тј. Лево-десно или дуж осе к. Да бисте га подесили, користите вредност својства транслате ( к, и) .

Пошто се елемент мора кретати само у једном правцу, и координата је постављена на и = 0. Али координата к треба да буде додељена специфичној вредности у пикселима по којој би објекат требало да буде промењен. Негативна вредност - кретање улево, позитивно - десно.

Али једноставно специфицирање трансформације ЦСС неће створити илузију кретања. Рјешење је додавање атрибута пријелаза опису објекта. Пример рада за премјештање елемента 125 пиксела удесно је приказан испод.

Код за прелазак линије : све 2 секунде за једноставну употребу :

• све - постављена вредност се примењује на све параметре објекта;
• 2 с - трајање ефекта 2 секунде;
• лакоћа- оут- успоравање на почетку и на крају.

Померите се доле

Вредност транслате ( к, и) се користи за вертикално подешавање анимације. У овом случају, к координата је једнака нули, а и је додељена величина помака. Померање је негативна вредност, доле је позитивна вредност.

Својство трансформације ЦСС-а за класу горе у примеру испод показује глатко кретање објекта из тачке са координатама (0; 0) 80 пиксела горе. Цласс довн одређује супротан смер кретања - 80 пиксела наниже.

Анимација у примјеру се изводи на константној брзини, што је назначено вриједношћу линеарног .

Диагонал мове

Ако комбинујете разматране покрете дефинисане трансформацијом, ЦСС примери за дијагонално кретање се добијају једноставно.

Атрибут поставља вредности за обе координате. Удаљеност одступања је дата у пикселима. Тамо где се објекат креће зависи од знакова. Могуће су четири опције:

• к , и позитивно - померање на десно;
• к , и негативно - помакните се лијево горе;
• к - позитивно, и - негативно - кретање према горе десно;
• к - негативно, и - позитивно - померите се налево.

Пример ће вам помоћи са ЦСС карактеристикама трансформације .

Ако се померање дуж обе осе извршава истим бројем пиксела (на пример, 32), довољно је да наведете један број. То значи да превод (32) одговара преводу (32, 32).

Ротација

Након разматрања могућих начина помака, прелазимо на сљедећи тип трансформације - ротацију. Ротација поставља вредност р отате (Ксдег) , где је Кс степени (од 0 до 360) по којима објекат одступа од своје оригиналне позиције.

Остаје да се разуме смер ротације. Тип ротације је одређен знаковима: плус - у смеру казаљке на сату, минус - против. Ако желите, можете комбиновати оба типа ротације - погледајте пример испод.

Ресизинг

Следећа вредност додаје скалирање елемента: скала ( а , б ) . Слова у заградама су ширина и висина објекта. Ако желите повећати величину пропорционално три пута, довољно је написати скалу (3) . Смањите димензије броја мање од једног.

Унос атрибута ЦСС атрибута т рансформ може се примијенити само на хоризонталну скалу Кс, или само на вертикалну скалу И. Интересантни ефекти рефлексије и сенке се добијају ако су негативне вредности дате за скалу И.

Трансформација текста

Почетници збуњују својство трансформације са текстуалним текстуалним атрибутом ЦСС. Запамтите, овај параметар се односи само на текст. Користи се за контролу случаја писања пасуса знакова. На пример, након инсталирања малих слова, текст се претвара у мала слова, велика слова - у велика слова (као што је притискање тастера ЦапсЛоцк на тастатури). Да би речи почеле великим словом, додељена је велика слова.

За разлику од трансформације објекта, трансформација текста подржава механизам наслеђивања. Конверзија знакова је додељена класама које су одговорне за приказивање заглавља, што је практично практично, будући да нема потребе за праћењем начина снимања. Под било којом варијантом правописа, сви блокови текста ће се појавити на веб страници на исти начин.