CSS3 2D преобразования

CSS3 преобразования

Переход CSS3, мы можем перемещать, масштабировать, в свою очередь, вращать и натяжные элементы.

Как это работает?

Эффект преобразования, таким образом, что элемент для изменения формы, размер и положение.

Вы можете конвертировать 2D или 3D элементы.

Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии имущества.

Сразу же после цифровой -webkit-, -ms- или -moz- назад в поддержку префикса атрибута первый номер версии браузера.

Internet Explorer 10, Firefox и Opera поддерживают преобразование собственности.

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

Примечание: Internet Explorer 9 требует Приставка -ms- версии.

2D преобразования

В этой главе вы узнаете 2D метод преобразования:

• переводить ()
• вращаться ()
• Шкала ()
• Перекос ()
• матрица ()

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

примеров

ДИВ { преобразования: вращаться (30 град) ; - Ms-преобразования: вращаться (30 град) ; / * IE 9 * / - WebKit-преобразования: вращаться (30 град) ; / * Safari и Chrome * / }

Попробуйте »

перевод метод ()

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

примеров

ДИВ { преобразования: переводить (50 точек, 100 точек) ; - Ms-преобразования: переводить (50 точек, 100 точек) ; / * IE 9 * / - WebKit-преобразования: переводить (50 точек, 100 точек) ; / * Safari и Chrome * / }

Попробуйте »

перевести значение (50px, 100px) представляет собой подвижный элемент 50 пикселей слева, и переехал на 100 пикселей сверху.

вращать метод ()

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

примеров

ДИВ { преобразования: вращаться (30 град) ; - Ms-преобразования: вращаться (30 град) ; / * IE 9 * / - WebKit-преобразования: вращаться (30 град) ; / * Safari и Chrome * / }

Попробуйте »

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

масштабный метод ()

Шкала () метод, который увеличить или уменьшить размер элемента, в зависимости от ширины (ось Х) и высоты (Y ось) параметры:

примеров

-MS-преобразования: масштаб (2,3) ; / * IE 9 * / -webkit-преобразования: масштаб (2,3); / * Safari * / преобразования: масштаб (2,3); / * Стандартный синтаксис * /

Попробуйте »

шкала (2,3) ширина перехода в два раза его первоначальный размер, и в три раза больше его первоначальной высоты.

Перекос () метод

Метод перекос () элемент в соответствии с поперечной (ось Х) и вертикальных параметров линии (ось Y) для заданного угла:

примеров

ДИВ { преобразования: косое (30 град, 20 град) ; - Ms-преобразования: косое (30 град, 20 град) ; / * IE 9 * / - WebKit-преобразования: косое (30 град, 20 град) ; / * Safari и Chrome * / }

Попробуйте »

косое (30deg, 20deg) является элементом оси Х и Y оси около 20 градусов около 30 градусов.

матричный метод ()

матричный метод () и метод преобразования 2D объединены в одну.

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

примеров

Использование матрицы () метод вращающегося Div элемент 30 °

ДИВ { преобразование: матрица (0,866, 0,5, - 0,5, 0,866, 0, 0) ; - Ms-преобразование: матрица ( 0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * IE 9 * / - WebKit-преобразования: матрица (0,866, 0,5, - 0,5, 0,866, 0, 0) ; / * Safari и Chrome * / }

Попробуйте »

Новое свойство преобразования

Ниже приведен список всех свойств преобразования:

метод преобразования 2D