1.1 Свойство transform
CSS-трансформации позволяют изменять положение, размер, поворот и наклон элементов без изменения их обычного потока документа. Это мощный инструмент для создания интерактивных и динамичных веб-интерфейсов. Рассмотрим основы трансформаций с использованием свойств transform, translate, rotate, scale и skew.
Свойство transform позволяет применять двумерные и трехмерные трансформации к элементам. Оно объединяет различные функции трансформации, такие как translate, rotate, scale и skew.
Синтаксис:
element {
transform: transformation-function;
}
Где:
transformation-function: функция трансформации, применяемая к элементу
Пример использования:
.element {
transform: translate(50px, 100px);
}
1.2 Трансформация translate
Трансформация translate используется для перемещения элемента по оси X и/или Y.
Синтаксис:
element {
transform: translate(x, y);
}
Где:
x: сдвиг по оси X (может быть отрицательным или положительным)y: сдвиг по оси Y (может быть отрицательным или положительным)
Пример:
<!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>
Объяснение кода:
.box: элемент с фиксированными размерами и цветом.box:hover: при наведении курсора на элемент применяется трансформацияtranslate(50px, 50px), перемещающая его на 50 пикселей вправо и вниз
1.3 Трансформация rotate
Трансформация rotate используется для поворота элемента вокруг его центра.
Синтаксис:
element {
transform: rotate(angle);
}
Где:
angle: угол поворота в градусах (может быть отрицательным или положительным)
Пример:
<!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 уменьшает)
Пример:
<!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 (может быть отрицательным или положительным)
<!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 позволяет объединять несколько функций трансформации, чтобы достичь сложных эффектов.
Пример:
<!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, создавая сложный эффект
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ