ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS 2D Трансформации


CSS 2D Трансформации

CSS-трансформации (преобразования) позволяют перемещать, вращать, масштабировать и наклонять элементы.

Наведите курсор мыши на элемент ниже, чтобы увидеть 2D-трансформацию:

2D поворот

В этой главе вы узнаете о следующем CSS свойстве:

  • transform

Поддержка браузерами

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
transform 36.0
10.0
16.0
9.0
23.0

Специальные браузерные префиксы

Некоторым старым браузерам нужны специальные префиксы (-ms- или -webkit-) для понимания свойств 2D-трансформации:

Пример

div {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari до 9.0 */
  transform: rotate(20deg); /* Стандартный синтаксис */
}
Попробуйте сами »

CSS Методы 2D трансформаций

С помощью CSS свойства transform вы можете использовать следующие методы 2D-трансформации:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

Совет: Вы узнаете о 3D преобразованиях в следующей главе.


Метод translate()

Translate

Метод translate() перемещает элемент из его текущей позиции (в соответствии с параметрами, указанными для оси X и оси Y).

В следующем примере элемент <div> перемещается на 50 пикселей вправо и на 100 пикселей ниже его текущей позиции:

Пример

div {
  transform: translate(50px, 100px);
}
Попробуйте сами »

Метод rotate()

Rotate

Метод rotate() вращает элемент по часовой или против часовой стрелки в соответствии с заданным градусом.

В следующем примере элемент <div> поворачивается по часовой стрелке на 20 градусов:

Пример

div {
  transform: rotate(20deg);
}
Попробуйте сами »

Использование отрицательных значений будет вращать элемент против часовой стрелки.

В следующем примере элемент <div> поворачивается против часовой стрелки на 20 градусов:

Пример

div {
  transform: rotate(-20deg);
}
Попробуйте сами »

Метод scale()

Scale

Метод scale() увеличивает или уменьшает размер элемента (в соответствии с параметрами, указанными для ширины и высоты).

В следующем примере элемент <div> увеличивается в два раза по сравнению с его первоначальной шириной и в три раза по сравнению с его первоначальной высотой:

Пример

div {
  transform: scale(2, 3);
}
Попробуйте сами »

В следующем примере элемент <div> уменьшается до половины его первоначальной ширины и высоты:

Пример

div {
  transform: scale(0.5, 0.5);
}
Попробуйте сами »

Метод scaleX()

Метод scaleX() увеличивает или уменьшает ширину элемента.

В следующем примере элемент <div> увеличивается в два раза по сравнению с его первоначальной шириной:

Пример

div {
  transform: scaleX(2);
}
Попробуйте сами »

В следующем примере элемент <div> уменьшается до половины его первоначальной ширины:

Пример

div {
  transform: scaleX(0.5);
}
Попробуйте сами »

Метод scaleY()

Метод scaleY() увеличивает или уменьшает высоту элемента.

В следующем примере элемент <div> увеличивается в три раза от его первоначальной высоты:

Пример

div {
  transform: scaleY(3);
}
Попробуйте сами »

В следующем примере элемент <div> уменьшается до половины его первоначальной высоты:

Пример

div {
  transform: scaleY(0.5);
}
Попробуйте сами »

Метод skewX()

Метод skewX() наклоняет элемент вдоль оси X на заданный угол.

Следующий пример наклоняет элемент <div> на 20 градусов по оси X:

Пример

div {
  transform: skewX(20deg);
}
Попробуйте сами »

Метод skewY()

Метод skewY() наклоняет элемент вдоль оси Y на заданный угол.

Следующий пример наклоняет элемент <div> на 20 градусов вдоль оси Y:

Пример

div {
  transform: skewY(20deg);
}
Попробуйте сами »

Метод skew()

Метод skew() наклоняет элемент вдоль оси X и Y на заданные углы.

В следующем примере элемент <div> наклоняется на 20 градусов по оси X и на 10 градусов по оси Y:

Пример

div {
  transform: skew(20deg, 10deg);
}
Попробуйте сами »

Если второй параметр не указан, он имеет нулевое значение. Итак, следующий пример наклоняет элемент <div> на 20 градусов вдоль оси X:

Пример

div {
  transform: skew(20deg);
}
Попробуйте сами »

Метод matrix()

Rotate

Метод matrix() объединяет все методы 2D-преобразования в один.

Метод matrix() принимает шесть параметров, содержащих математические функции, которые позволяют вращать, масштабировать, перемещать (переводить) и наклонять элементы.

Параметры по порядку следования: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Пример

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Попробуйте сами »

Проверьте себя с помощью упражнений!


CSS Свойства трансформации

В следующей таблице перечислены все свойства 2D-трансформации:

Свойство Описание
transform Применяет 2D или 3D трансформацию к элементу
transform-origin Позволяет изменить положение трансформированных элементов

CSS 2D Методы трансформации

Функция Описание
matrix(n,n,n,n,n,n) Определяет 2D-трансформацию, используя матрицу из шести значений
translate(x,y) Определяет 2D перемещение, перемещение элемента вдоль оси X и Y
translateX(n) Определяет 2D-перемещение, перемещая элемент вдоль оси X
translateY(n) Определяет 2D-перемещение, перемещая элемент вдоль оси Y
scale(x,y) Определяет размер 2D трансформации, изменяя ширину и высоту элементов
scaleX(n) Определяет размер 2D трансформации, изменяя ширину элемента
scaleY(n) Определяет размер 2D трансформации, изменяя высоту элемента
rotate(angle) Определяет 2D поворот, угол указывается в параметре
skew(x-angle,y-angle) Определяет сдвиг 2D трансформации по оси X и Y
skewX(angle) Определяет сдвиг 2D трансформации по оси X
skewY(angle) Определяет сдвиг 2D трансформации по оси Y