Трансформирайте CSS: Теория и примери за трансформиране на обекти

Третата версия на каскадни стилови таблици въведе нови свойства за обекти на уеб страници. Това е възможността за създаване на блокове с изгладени ъгли, регулиране на сенките, добавяне на прозрачност и градиент, задаване на анимация. Последното заслужава да бъде споменато по-подробно. Ако по-рано, за да създаде илюзията за движение, на страниците бяха добавени gif-файлове, които трябваше да бъдат специално изчертани, а сега трансформиращият CSS атрибут извършва всички действия за анимиране на обекти автоматично. Остава да се научите как да го използвате.

Характеристики на имота

Обикновено се прибягва до обекти, когато се преобразува мишка. Той е настроен за псевдо клас, наречен : hover . Промените засягат само един елемент от уеб страницата, без да засягат останалите.

Разглежданият параметър на стиловете често се бърка с друг - text-transform . CSS ясно разграничава тези атрибути. Последният определя стила на писане на текста и се прилага само за параграфи от уеб страницата, докато трансформацията в чист вид се използва за всички елементи.

Можете да добавите към всеки обект:

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

В допълнение към илюзията за движение от три вида, имотът ви позволява да зададете размисъл, промяна и перспектива. За напреднали, параметърът се дава под формата на матрица.

Трансформацията се извършва спрямо центъра на елемента. Ако е необходимо, референтната точка се измества. Параметърът за преобразуване: a b c измества центъра на обекта спрямо триизмерната xyz координатна система .

Хоризонтално движение

Най-простият вид движение е хоризонтално, т.е. наляво-надясно или по оста х . За да го зададете, използвайте стойността на превода на свойствата ( x, y) .

Тъй като елементът трябва да се движи само в една посока, y координатата е зададена на y = 0. Но на x координатите трябва да се присвои конкретна стойност в пиксели, с която обектът трябва да се измести. Отрицателна стойност - движение вляво, положително - надясно.

Но просто определянето на преобразуването CSS няма да създаде илюзията за движение. Решението е да добавите атрибута на прехода към описанието на обекта. Работен пример за изместване на елемент 125 пиксела вдясно е показан по-долу.

Кодът за преход на линията : всички 2 s лесно излизащи означава:

• all - зададената стойност се прилага за всички параметри на обекта;
• 2 s - продължителност на ефекта 2 секунди;
• лекота навън - забавено движение в началото и в края.

Придвижете се надолу

Стойността на транслираната ( x, y) се използва за вертикална настройка на анимацията. В този случай координатата x е равна на нула, а на y е присвоена величината на смяна. Придвижването нагоре е отрицателна стойност, надолу е положителна стойност.

Свойството за преобразуване на CSS за класа в примера по-долу показва гладкото движение на обект от точка с координати (0; 0) 80 пиксела нагоре. Класът надолу определя обратната посока на движение - 80 пиксела надолу.

Анимацията в примера се извършва с постоянна скорост, както е посочено от стойността на линейната .

Диагонално движение

Ако комбинирате разглежданите движения, определени от трансформацията, CSS примерите за диагонално движение се получават просто.

Атрибутът задава стойности за двете координати. Разстоянието на отместване е дадено в пиксели. Където обектът ще се движи, зависи от знаците. Възможни са четири опции:

• x , y положително - придвижване надолу надясно;
• x , y negative - движение наляво;
• x - положително, y - отрицателно - движение нагоре вдясно;
• x - отрицателно, y - положително - движение наляво.

Един пример ще помогне за трансформирането на CSS функциите.

Ако изместването по двете оси се извършва от същия брой пиксели (например 32), достатъчно е да се посочи един номер. Това означава, че преводът (32) съответства на превода (32, 32).

въртене

След като бъдат разгледани възможните начини на изместване, ще преминем към следващия тип трансформация - ротация. Въртенето определя стойността на rate (Xdeg) , където X е градуса (от 0 до 360), с които обектът се отклонява от първоначалната си позиция.

Остава да се разбере посоката на въртене. Видът на въртене се определя от знаците: плюс - по посока на часовниковата стрелка, минус - срещу. Ако желаете, можете да комбинирате и двата вида въртене - вижте примера по-долу.

преоразмеряване

Следната стойност добавя мащабиране на елемент: скала ( a , b ) . Буквите в скоби са ширината и височината на обекта. Ако искате да увеличите размера пропорционално три пъти, достатъчно е да напишете скала (3) . Намалете размерите на броя по-малко от един.

Вписването на атрибута CSS атрибут t ransform може да се прилага само към хоризонталната скала X или само към вертикалната скала Y. При отрицателни стойности за мащаб Y се получават интересни ефекти на отражение и сянка .

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

Начинаещите объркват свойството на трансформация с атрибута CSS на текстовия текст . Не забравяйте, че този параметър се отнася само за текст. Използва се за управление на случай на записване на абзац от символи. Например, след като инсталирате малки букви, текстът се преобразува в малки букви, главни - в главни (като натискате клавиша CapsLock на клавиатурата). За да накарате думите да започнат с главна буква, имотът се присвоява с главни букви .

За разлика от преобразуването на обекта, текстовата трансформация поддържа механизма на наследяване. Преобразуването на знаци се възлага на класове, които отговарят за показването на заглавията, което е удобно на практика, тъй като няма нужда да се следи метода на записване. Под всеки вариант на правопис всички текстови блокове ще се появят на уеб сайта по същия начин.