Трансформация

Трансформация

Coursme
8 мин.
17 янв. 2024

На протяжении этого урока мы рассмотрим основные виды трансформаций в 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, которое позволяет изменять исходную точку трансформации. Это свойство открывает новые возможности для точного позиционирования элементов в пространстве.

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Статьи и курсы
Меню