Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Трансформации

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за CSS трансформациите

CSS трансформациите позволяват да завъртаме, мащабираме и променяме визуално елементи, без да нарушаваме структурата на HTML. Те се задават чрез свойството transform и могат да се комбинират. Важно е да запомните, че когато добавите нова трансформация, тя замества предишната, ако не я изпишете отново в същия ред.

Стъпка по стъпка: прилагане на трансформации

Изберете елементите с клас ProfileItem.
Добавете свойството transform със стойност rotate(20deg), за да ги завъртите на 20 градуса.
Изберете елемент (например телефон) и задайте transform: scaleX(0.7);, за да го намалите по хоризонтала.
Обърнете внимание, че новата трансформация премахва предишната.
Комбинирайте трансформациите така: transform: scaleX(0.7) rotate(-10deg);

Трансформациите се изписват в един ред и се разделят с интервал.

Използвани CSS функции

transform – Основно свойство за прилагане на 2D/3D трансформации върху елемент.
rotate() – Завърта елемент на зададени градуси (напр. 20deg, -10deg).
scaleX() – Променя размера по хоризонталната ос; стойност под 1 намалява, над 1 увеличава.

Практическа задача

Добавете различни трансформации към няколко елемента от страницата:

Завъртете един елемент на 15 градуса.
Намалете друг по X с scaleX(0.5).
Комбинирайте поне две трансформации в един transform.

Експериментирайте с различни стойности, за да видите как влияят на визуалното представяне.