Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Основи трансформацій

Основи трансформацій

Frontend SELF UA
Рівень 23 , Лекція 0
Відкрита

1.1 Властивість transform

CSS-трансформації дозволяють змінювати положення, розмір, обертання та нахил елементів без зміни їх звичайного потоку документа. Це потужний інструмент для створення інтерактивних та динамічних веб-інтерфейсів. Розглянемо основи трансформацій з використанням властивостей transform, translate, rotate, scale та skew.

Властивість transform дозволяє застосовувати двовимірні та тривимірні трансформації до елементів. Воно об'єднує різні функції трансформації, такі як translate, rotate, scale та skew.

Синтаксис:

    
      element {
        transform: transformation-function;
      }

Де:

  • transformation-function: функція трансформації, застосована до елемента

Приклад використання:

CSS 
    
      .element {
        transform: translate(50px, 100px);
      }

1.2 Трансформація translate

Трансформація translate використовується для переміщення елемента по осі X та/або Y.

Синтаксис:

    
      element {
        transform: translate(x, y);
      }

Де:

  • x: зсув по осі X (може бути від'ємним або додатним)
  • y: зсув по осі Y (може бути від'ємним або додатним)

Приклад:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Трансформація translate</title>
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: #3498db;
              transition: transform 0.5s;
            }

            .box:hover {
              transform: translate(50px, 50px);
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
        </body>
      </html>
Вебінар JavaRush

Пояснення коду:

  • .box: елемент з фіксованими розмірами та кольором
  • .box:hover: при наведенні курсора на елемент застосовується трансформація translate(50px, 50px), яка зміщує його на 50 пікселів вправо та вниз

1.3 Трансформація rotate

Трансформація rotate використовується для обертання елемента навколо його центру.

Синтаксис:

    
      element {
        transform: rotate(angle);
      }

Де:

  • angle: кут обертання у градусах (може бути від'ємним або додатним)

Приклад:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Трансформація rotate</title>
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: #e74c3c;
              transition: transform 0.5s;
            }

            .box:hover {
              transform: rotate(45deg);
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
        </body>
      </html>

Пояснення коду:

  • .box: елемент з фіксованими розмірами та кольором
  • .box:hover: при наведенні курсора на елемент застосовується трансформація rotate(45deg), яка обертає його на 45 градусів за годинниковою стрілкою

1.4 Трансформація scale

Трансформація scale використовується для зміни розміру елемента по осі X і/або Y.

Синтаксис:

    
      element {
        transform: scale(sx, sy);
      }

Де:

  • sx: масштабування по осі X (значення більше 1 збільшує елемент, менше 1 зменшує)
  • sy: масштабування по осі Y (значення більше 1 збільшує елемент, менше 1 зменшує)

Приклад:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Трансформація scale</title>
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: #2ecc71;
              transition: transform 0.5s;
            }

            .box:hover {
              transform: scale(1.5, 1.5);
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
        </body>
      </html>

Пояснення коду:

  • .box: елемент із фіксованими розмірами та кольором
  • .box:hover: при наведенні курсора на елемент застосовується трансформація scale(1.5, 1.5), яка збільшує його розмір в 1.5 рази по обох осях

1.5 Трансформація skew

Трансформація skew використовується для нахилу елемента по осі X і/або Y.

Синтаксис:

    
      element {
        transform: skew(ax, ay);
      }

Де:

  • ax: кут нахилу по осі X (може бути від'ємним або додатним)
  • ay: кут нахилу по осі Y (може бути від'ємним або додатним)
HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Трансформація skew</title>
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: #9b59b6;
              transition: transform 0.5s;
            }

            .box:hover {
              transform: skew(20deg, 10deg);
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
        </body>
      </html>

Пояснення коду:

  • .box: елемент із фіксованими розмірами та кольором.
  • .box:hover: при наведенні курсора на елемент застосовується трансформація skew(20deg, 10deg), що нахиляє його на 20 градусів по осі X і на 10 градусів по осі Y.

1.6 Об'єднання різних трансформацій

Властивість transform дозволяє об'єднувати кілька функцій трансформації, щоб досягти складних ефектів.

Приклад:

HTML 
    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Об'єднані трансформації</title>
          <style>
            .box {
              width: 100px;
              height: 100px;
              background-color: #3498db;
              transition: transform 0.5s;
            }

            .box:hover {
              transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
            }
          </style>
        </head>
        <body>
          <div class="box"></div>
        </body>
      </html>

Пояснення коду:

  • .box: елемент із фіксованими розмірами та кольором
  • .box:hover: при наведенні курсора на елемент одночасно застосовуються трансформації translate, rotate, scale і skew, створюючи складний ефект
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ