Лучшее руководство по CSS3 преобразования собственности в 2024 году. В этом руководстве вы можете изучить примеров,Поддержка браузеров,Определение атрибута и инструкции,грамматика,Другие примеры,

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

примеров

Вращение DIV элемента:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

Попробуйте »

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

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

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

属性
transform (2D) 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-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-

Определение атрибута и инструкции

2D Transform свойство применяется к элементу или 3D-преобразования. Это свойство позволяет элементы вращать, масштабировать, перемещать, наклон, и так далее.

Чтобы лучше понять свойства Transform см экземпляр онлайн .

По умолчанию: никто
Наследование: нет
Версия: CSS3
Синтаксис JavaScript: объект .style.transform = "Rotate (7deg)"


грамматика

преобразование:доли не имеет | спектрально-функции;

значение описание
никто Определение не преобразовывает.
матрица (п, п, п,п, п, п) Определение 2D-преобразование, используя матрицу из шести значений.
Matrix3D (п, п, п,п, п, п, п, п, п, п, п, п, п, п, п, п) 3D преобразования определяется с использованием 16 значений 4x4 матрицы.
переводить(х, у) Определить 2D преобразование.
translate3d(х, у, г) Определить 3D преобразование.
translateX(х) Определение конверсии, но со значением Х-оси.
translateY(у) Определение конверсии, но со значением Y-оси.
translateZ(г) Определить 3D преобразование, но со значением Z оси.
шкала (х [, у]?) Определение 2D масштабное преобразование.
Scale3D(х, у, г) Определить 3D масштабное преобразование.
Scalex(х) Устанавливая значение оси X, чтобы определить преобразование масштаба.
ScaleY(у) Установив значение оси Y для определения масштабного преобразования.
scaleZ(г) Для определения масштабного преобразования 3D, установив значение оси Z.
Поворот(угол) Определить 2D поворачивается на заданный угол в аргументе.
Rotate3D (х, у, г,угол) Определить вращение 3D.
rotateX(угол) 3D Х определяется вдоль вала.
rotateY(угол) Ось 3D Y определяется по вращению.
rotateZ(угол) 3D Z-оси определяется по вращению.
косое (х-угол, у-угол) Определено вдоль 2D X и преобразование Y-оси перекоса.
skewX(угол) 2D оси Х определяется по наклону преобразования.
skewY(угол) Определено вдоль оси Y. перекос преобразования 2D.
перспектива(п) 3D элемент преобразования, чтобы определить вид в перспективе.


примеров

Другие примеры

Поворот изображения
Этот пример демонстрирует, как создать "Полароида" фотографии и поворачивать изображения.

CSS3 преобразования собственности
10/30