Трансформация
Трансформация
На протяжении этого урока мы рассмотрим основные виды трансформаций в CSS3, включая вращение, масштабирование, перемещение и наклон. Мы также углубимся в комбинирование различных преобразований для создания сложных анимаций. CSS3 внесло новшества в мир веб-разработки, включая в себя встроенные трансформации элементов.Трансформации включают в себя различные преобразования, такие как вращение, масштабирование, наклон и перемещение элемента по вертикали или горизонтали. Для осуществления этих трансформаций в CSS3 используется свойство transform.
Вращение
Для поворота элемента используется функция rotate в свойстве transform. Величина угла поворота указывается в градусах в скобках после слова rotate. Например, давайте создадим блок и повернем его на 30 градусов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div {
background-color: #ccc;
width: 120px;
height: 120px;
margin: 5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.rotated {
transform: rotate(30deg);
}
</style>
</head>
<body>
<div></div>
<div class="rotated">rotate(30deg)</div>
<div></div>
</body>
</html>
Обратите внимание, что при вращении элемент может перекрывать соседние элементы из-за установки положения элементов перед поворотом. Угол поворота может быть как положительным, так и отрицательным, что определяет направление вращения.
Масштабирования
Масштабирование осуществляется с использованием свойства transform и функции scale. Различные значения масштабирования влияют на размер элемента. Вот примеры с использованием HTML и CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Трансформации в CSS3</title>
<style>
div {
background-color: #ccc;
width: 120px;
height: 120px;
margin: 5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.halfScale {
transform: scale(0.5);
}
.doubleScale {
transform: scale(2);
}
.customScale {
transform: scale(2, 0.5);
}
.mirrorEffect {
transform: scaleX(-1);
}
</style>
</head>
<body>
<div></div>
<div class="doubleScale">scale(2)</div>
<div class="halfScale">scale(0.5)</div>
<div class="customScale">scale(2, 0.5)</div>
<div class="mirrorEffect">scaleX(-1)</div>
</body>
</html>
Пояснения:Простое масштабирование:
.halfScale: Этот блок масштабируется в 0.5 раза относительно его исходного размера.Увеличение размера:
.doubleScale: Здесь элемент увеличивается в 2 раза.Кастомное масштабирование:
.customScale: Этот пример демонстрирует, как можно задать масштабирование отдельно по горизонтали и вертикали.Зеркальное отражение:
.mirrorEffect: Используя отрицательное значение, мы создаем эффект зеркального отражения элемента по горизонтали.
Перемещения
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример перемещения в CSS3</title>
<style>
div {
width: 120px;
height: 120px;
background-color: #ccc;
margin: 5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.translated {
transform: translate(50px, 30px);
background-color: red;
}
.translatedX {
transform: translateX(30px);
background-color: blue;
}
.translatedY {
transform: translateY(-2.5em);
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div class="translated"></div>
<div></div>
<div class="translatedX"></div>
<div></div>
<div class="translatedY"></div>
</body>
</html>
Пояснения:Пример перемещения в обе стороны:
.translated: Этот блок смещается на 50 пикселей вправо (offset_X) и 30 пикселей вниз (offset_Y).Пример перемещения по горизонтали:
.translatedX: В данном случае, элемент смещается только по горизонтали на 30 пикселей.Пример перемещения по вертикали:
.translatedY: Этот блок перемещается по вертикали на -2.5 em, что может представлять отрицательное смещение вверх.
Обратите внимание, что значения смещения могут быть заданы не только в пикселях, но и в других единицах измерения, таких как em, % и другие. Все это позволяет легко управлять положением элементов на странице.
Наклон
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример наклона в CSS3</title>
<style>
div {
width: 120px;
height: 120px;
background-color: #ccc;
margin: 5px;
padding: 40px 10px;
box-sizing: border-box;
border: 1px solid #333;
display: inline-block;
}
.skewed {
transform: skew(30deg, 10deg);
background-color: red;
}
.skewedX {
transform: skewX(45deg);
background-color: blue;
}
.skewedY {
transform: skewY(-30deg);
background-color: green;
}
</style>
</head>
<body>
<div></div>
<div class="skewed"></div>
<div></div>
<div class="skewedX"></div>
<div></div>
<div class="skewedY"></div>
</body>
</html>
Пояснения:Наклон по обеим осям:
.skewed: Этот блок наклоняется на 30 градусов по оси X и на 10 градусов по оси Y.Наклон только по оси X:
.skewedX: В данном примере блок наклоняется только по оси X на 45 градусов.Наклон только по оси Y:
.skewedY: Этот блок наклоняется только по оси Y на -30 градусов (в противоположную сторону).
Обратите внимание, что для создания наклона только по одной оси, второй оси присваивается значение 0. Также можно использовать функции skewX() и skewY() для наклона по соответствующим осям. Отрицательные значения создают наклон в противоположную сторону.
Комбинирование преобразований
Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:
transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5) rotate(90deg);
Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.
Изменения исходной точки трансформации
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример изменения исходной точки трансформации в CSS3</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 80px 30px;
float: left;
box-sizing: border-box;
border: 1px solid #333;
}
.transform1 {
transform: rotate(-45deg);
/* Исходная точка по умолчанию (центр элемента) */
}
.transform2 {
transform-origin: left top;
transform: rotate(-45deg);
/* Исходная точка - левый верхний угол элемента */
}
.transform3 {
transform-origin: right bottom;
transform: rotate(-45deg);
/* Исходная точка - правый нижний угол элемента */
}
</style>
</head>
<body>
<div class="transform1"></div>
<div class="transform2"></div>
<div class="transform3"></div>
</body>
</html>
Пояснения:Исходная точка по умолчанию (центр элемента):
.transform1: Этот блок вращается на -45 градусов с использованием исходной точки по умолчанию (центр элемента).Исходная точка - левый верхний угол элемента:
.transform2: В данном случае, исходная точка изменена на левый верхний угол элемента, и вращение происходит относительно этой точки.Исходная точка - правый нижний угол элемента:
.transform3: Здесь исходная точка установлена в правый нижний угол элемента, и вращение происходит относительно этой точки.
Изменение исходной точки трансформации позволяет контролировать, относительно какой точки элемент будет трансформирован. Это особенно полезно при создании сложных анимаций и эффектов.
Заключение
Трансформации в CSS3 предоставляют широкий спектр возможностей для визуального оформления веб-страниц. От вращения и масштабирования до перемещения и наклона, каждое преобразование приносит свою уникальную динамику в создание пользовательского интерфейса. Комбинируя эти трансформации, вы можете достичь удивительных эффектов и анимаций.
Не забывайте также о свойстве transform-origin, которое позволяет изменять исходную точку трансформации. Это свойство открывает новые возможности для точного позиционирования элементов в пространстве.
Будьте первым