САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS3 2D Трансформация



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

CSS3 трансформация позволяет преобразовывать, поворачивать, масштабировать и наклонять элементы.

Трансформация - это эффект, который позволяет элементу изменять форму, размер и положение.

CSS3 поддерживает 2D и 3D преобразования.

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

2D вращать
3D вращать

Поддержка браузера для 2D трансформации

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

Номер, за которыми следуют -webkit-,-moz-, или -o- указывает первую версию, которая работает с префиксом.

Свойство
transform 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
12.1
10.5 -o-

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

В этой главе вы узнаете о следующих методах 2D трансформации:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

Совет: Вы узнаете о 3D трансформации в следующей главе.


Метод translate()

Транслировать

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

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

Пример

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}
Редактор кода »

Метод rotate()

Вращать

Метод rotate() поворачивает элемент по часовой стрелке или против часовой стрелки в соответствии с заданной степенью.

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

Пример

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}
Редактор кода »

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

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

Пример

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}
Редактор кода »

Метод scale()

Масштаб

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

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

Пример

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}
Редактор кода »

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

Пример

div {
    -ms-transform: scale(0.5, 0.5); /* IE 9 */
    -webkit-transform: scale(0.5, 0.5); /* Safari */
    transform: scale(0.5, 0.5);
}
Редактор кода »

Метод skewX()

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

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

Пример

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
Редактор кода »

Метод skewX()

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

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

Пример

div {
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg);
}
Редактор кода »

Метод skewY()

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

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

Пример

div {
    -ms-transform: skew(20deg, 10deg); /* IE 9 */
    -webkit-transform: skew(20deg, 10deg); /* Safari */
    transform: skew(20deg, 10deg);
}
Редактор кода »

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

Пример

div {
    -ms-transform: skew(20deg); /* IE 9 */
    -webkit-transform: skew(20deg); /* Safari */
    transform: skew(20deg);
}
Редактор кода »

Метод matrix()

Rotate

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

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

Метод параметров: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Пример

div {
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}
Редактор кода »

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


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

Метод в следующей таблице перечислены все свойства преобразования 2D:

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

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

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