2.1 Властивість transform-origin
Властивість transform-origin у CSS визначає точку, відносно якої застосовуються трансформації, такі як rotate, scale, skew, і translate. За замовчуванням ця точка знаходиться у центрі елемента, але ти можеш змінити її розташування, щоб досягти необхідних візуальних ефектів.
Основи transform-origin
Синтаксис властивості transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Де:
x-axis: визначає положення точки по горизонтальній осіy-axis: визначає положення точки по вертикальній осіz-axis: визначає положення точки по осі Z (використовується для 3D-трансформацій)
Можливі значення:
- Ключові слова:
top,right,bottom,left,center - Відсоткові значення: задають точку походження у відсотках від розміру елемента
- Абсолютні значення: задають точку походження у пікселях або інших одиницях виміру
Приклади значень:
transform-origin: 50% 50%;— центр елемента (значення за замовчуванням)transform-origin: 0 0;— верхній лівий кут елементаtransform-origin: 100% 100%;— нижній правий кут елементаtransform-origin: 50px 100px;— зсув на 50 пікселів праворуч і 100 пікселів вниз від верхнього лівого кута
Центрування точки походження (за замовчуванням)
У цьому прикладі трансформація rotate буде відбуватись навколо центру елемента.
<!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;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Зміщення точки
Зміщення точки походження у верхній лівий кут
У цьому прикладі точка походження трансформації зміщена у верхній лівий кут елемента.
<!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: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</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: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Задання значень
Використання відсоткових значень
У цьому прикладі точка походження трансформації знаходиться на 25% за горизонталлю і 75% за вертикаллю.
<!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: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Використання абсолютних значень
У цьому прикладі точка походження трансформації зміщена на 50 пікселів за горизонталлю і 20 пікселів за вертикаллю.
<!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: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Практичне застосування
Обертання елемента навколо конкретної точки
Використання transform-origin корисно для створення обертових елементів, які повинні обертатися навколо певної точки. Наприклад, створення стрілки годинника.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обертання стрілки годинника</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Приклад для позиції на 1 годину */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</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: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ