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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ