СSS Свойство transform
Пример
Поворот, наклон и масштабирование трех различных элементов <div>:
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
Редактор кода »
Определение и использование
Свойство transform свойство применяет преобразование 2D или 3D к элементу. Это свойство позволяет элементы вращать, масштабировать, перемещать, наклонять и т.д.
Чтобы лучше понять свойство transform, просмотр демо-версии.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да Прочитайте о animatable Попробовать |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.transform="rotate(7deg)" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| 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 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS Синтаксис
transform: none|transform-functions|initial|inherit;
Значение свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| 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) | Определяет масштабное преобразование, задавая значение для оси Z | |
| rotate(angle) | Определяет 2D поворот, угол задается в параметре | Воспроизвести » |
| rotate3d(x,y,z,angle) | Определяет 3D вращение | |
| rotateX(angle) | Определяет 3D вращение вдоль оси X | Воспроизвести » |
| rotateY(angle) | Определяет 3D вращение вдоль оси Y | Воспроизвести » |
| rotateZ(angle) | Определяет 3D вращение вдоль оси Z | Воспроизвести » |
| skew(x-angle,y-angle) | Определяет 2D косое преобразование вдоль оси X и Y | Воспроизвести » |
| skewX(angle) | Определяет 2D косое преобразование вдоль оси X | Воспроизвести » |
| skewY(angle) | Определяет 2D косое преобразование вдоль оси Y | Воспроизвести » |
| perspective(n) | Определяет перспективный вид для 3D преобразованного элемента | |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial | |
| inherit | Наследует это свойство от родительского элемента. Прочитайте о inherit |
Примеры
Изображения брошены в таблицу
В этом примере показано, как создавать "полароидные" изображения и поворачивать их.
Связанные страницы
CSS Учебник: CSS 2D Трансформация
CSS Учебник: CSS 3D Трансформация
HTML DOM Справочник: Свойство transform
