Лучшее руководство по CSS3 преобразования собственности в 2024 году. В этом руководстве вы можете изучить примеров,Поддержка браузеров,Определение атрибута и инструкции,грамматика,Другие примеры,
CSS3 преобразования собственности
примеров
Вращение 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 элемент преобразования, чтобы определить вид в перспективе. |
Другие примеры
Поворот изображения
Этот пример демонстрирует, как создать "Полароида" фотографии и поворачивать изображения.