CSS3 transformСвойство
Пример
Повернуть элементы div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari и 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- |
Определение свойства и инструкции по использованию
Свойство Transform используется для применения 2D- или 3D-преобразований к элементу. Это свойство позволяет вращать, масштабировать, перемещать, наклонять и т. д. элементы.
Чтобы лучше понять свойство Transform, просмотрите.
| Значение по умолчанию: | none |
|---|---|
| Наследуется: | нет |
| версия: | CSS3 |
| Синтаксис JavaScript: | object.style.transform="rotate(7deg)" |
Синтаксис
transform: none|transform-functions;
| Значение | Описание |
|---|---|
| none | Определяет отсутствие преобразования. |
| matrix(n,n,n,n,n,n) | Определяет 2D-преобразование с использованием матрицы из шести значений. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Определяет 3D-преобразование с использованием матрицы 4x4 из 16 значений. |
| translate(x,y) | Определяет 2D-преобразование. |
| translate3d(x,y,z) | Определяет 3D-преобразование. |
| translateX(x) | Определяет преобразование, используя только значение для оси X. |
| translateY(y) | Определяет преобразование, используя только значение для оси Y. |
| translateZ(z) | Определяет 3D-преобразование, используя только значение для оси Z. |
| scale(x[,y]?) | Определяет 2D-преобразование масштабирования. |
| scale3d(x,y,z) | Определяет 3D-преобразование масштабирования. |
| scaleX(x) | Определяет преобразование масштабирования, задавая значение для оси X. |
| scaleY(y) | Определяет преобразование масштабирования, задавая значение для оси Y. |
| scaleZ(z) | Определяет 3D-преобразование масштабирования, задавая значение для оси Z. |
| rotate(angle) | Определяет 2D-поворот, угол которого задаётся в параметре. |
| rotate3d(x,y,z,angle) | Определяет 3D-поворот. |
| rotateX(угол) | Определяет 3D-поворот вокруг оси X. |
| rotateY(угол) | Определяет 3D-поворот вокруг оси Y. |
| rotateZ(угол) | Определяет 3D-поворот вокруг оси Z. |
| skew(x-angle,y-angle) | Определяет 2D-преобразование наклона по осям X и Y. |
| skewX(angle) | Определяет 2D-преобразование наклона по оси X. |
| skewY(angle) | Определяет 2D-преобразование наклона по оси Y. |
| perspective(n) | Определяет перспективный вид для 3D-преобразованных элементов. |
Другие примеры
Этот пример демонстрирует, как создавать «полароид»-фотографии и поворачивать изображения.
CSS3 Transform: различные деформации и повороты
Другие расширения