Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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


« Назад Далее »

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

С помощью CSS3 трансформации мы можем перемещать, масштабировать, переворачивать, вращать и растягивать элементы.

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

Как Это Работает?

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

Вы можете трансформировать ваши элементы, используя 2D (двухмерные) или 3D (трехмерные) трансформации.


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

Свойство Поддержка Браузерами
transform

Internet Explorer 9 требует приставки -ms-.

Firefox требует приставки -moz-.

Chrome и Safari требуют приставки -webkit-.

Opera требует приставки -o-.


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

В этом уроке вы узнаете о двухмерных методах трансформации:

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

Вы узнаете о 3D трансформациях в следующем уроке.

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari и Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Попробуйте сами »


Метод translate()

Перемещение

С помощью метода translate() элемент перемещается из текущего положения в новое - в зависимости от параметров, заданных для левой (ось X) и верхней (ось Y) позиций:

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari и Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

Попробуйте сами »

Значение translate(50px,100px) перемещает элемент на 50 пикселов слева и на 100 пикселов сверху.


Метод rotate()

Поворот

С помощью метода rotate(), элемент поворачивается по часовой стрелке на заданный угол. Допустимы отрицательные значения и повороты элемента против часовой стрелки.

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari и Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Попробуйте сами »

Значение rotate(30deg) поворачивает элемент на 30 градусов по часовой стрелке.


Метод scale()

Масштабирование

Посредством метода scale() элемент увеличивается или уменьшается в размере, в зависимости от параметров, заданных для ширины (ось X) и высоты (ось Y):

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari и Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

Попробуйте сами »

Значение scale(2,4) трансформирует ширину, удваивая ее, и высоту, увеличивая ее в 4 раза, относительно исходного размера.


Метод skew()

Скос

Используя метод skew(), можно вращать элемент, задавая угол в параметрах для горизонтальных (ось X) и вертикальных (ось Y) линий:

Opera Safari Chrome Firefox Internet Explorer

Пример

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari и Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

Попробуйте сами »

Значение skew(30deg,20deg) разворачивает элемент на 30 градусов вокруг оси X и на 20 градусов вокруг оси Y.


Метод matrix()

Поворот

Метод matrix() комбинирует все методы двухмерных трансформаций в один.

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Как повернуть элемент div на 30 градусов, используя матричный метод:

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari и Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Попробуйте сами »


Новые Свойства Трансформации

Следующая таблица перечисляет все свойства трансформации:

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

Методы Двухмерной Трансформации

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





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru