СSS3 2D Трансформация
CSS3 Трансформация
CSS3 трансформация позволяет преобразовывать, поворачивать, масштабировать и наклонять элементы.
Трансформация - это эффект, который позволяет элементу изменять форму, размер и положение.
CSS3 поддерживает 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()
Метод 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 |
