Webkit transform css что это

transform

Краткая информация

Версии CSS

Описание

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

Значения

Функции трансформации

matrix

rotate

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

[window.]document.getElementById(» elementID «).style.transform

Браузеры

Источник

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.

Краткая информация

Синтаксис

Обозначения

Значения

Функции трансформации

matrix

matrix3d

Задаёт трёхмерную матрицу преобразований.

rotate()

Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

rotateX()

Поворачивает элемент на заданный угол относительно оси X.

rotateY()

Поворачивает элемент на заданный угол относительно оси Y.

rotateZ()

Поворачивает элемент на заданный угол относительно оси Z.

rotate3d

Поворачивает элемент в трёхмерном пространстве.

scale()

Масштабирует элемент по горизонтали и вертикали.

scaleX()

Масштабирует элемент по горизонтали.

scaleY()

Масштабирует элемент по вертикали.

scaleZ()

Масштабирует элемент по оси Z.

scale3d

Масштабирует элемент в трёхмерном пространстве.

Наклоняет элемент на заданный угол по горизонтали и вертикали.

skewX()

Наклоняет элемент на заданный угол по горизонтали.

skewY()

Наклоняет элемент на заданный угол по вертикали.

translate()

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX()

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY()

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

translateZ()

Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.

translate3d

Сдвигает элемент на заданное значение в трёхмерном пространстве.

Источник

Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Двигаемся влево

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

Источник

transform

Краткая информация

Версии CSS

Описание

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

Синтаксис

Значения

Функции трансформации

matrix

rotate

scale

Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

В данном примере при наведении курсора на изображение оно поворачивается на 15 градусов по часовой стрелке.

Объектная модель

[window.]document.getElementById(» elementID «).style.transform

Браузеры

Источник

Трансформация

Свойство transform поставляется в двух разных наборах — двумерных и трёхмерных. В каждом из них есть свои индивидуальные свойства и значения.

В этом уроке мы рассмотрим как двумерные, так и трёхмерные преобразования. Вообще говоря, поддержка браузера для свойства transform не велика, но она становится всё лучше с каждым днем. Для большей поддержки рекомендуются вендорные префиксы, однако вам может понадобиться загрузить последнюю версию Chrome, чтобы увидеть все эти преобразования в действии.

Синтаксис transform

В интересах краткости, остальная часть этого урока не включает префиксы. Они, однако, настоятельно рекомендуется для любого кода в производственной среде. Со временем мы сможем убрать эти префиксы, однако для безопасного подхода оставляйте их в данный момент.

Двумерная трансформация

Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси z. Эти трёхмерные преобразования помогают определить не только длину и ширину элемента, но и глубину. Мы начнем с обсуждения, как трансформировать элементы в двумерной плоскости, а затем перейдём к работе с трёхмерными преобразованиями.

2d rotate

Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.

Демонстрация rotate

Серый квадрат за повёрнутым элементом символизирует исходное положение элемента. Кроме того, при наведении курсора мыши на блок он будет вращаться на 360 градусов по горизонтали. По ходу урока следите за серым квадратом в каждой демонстрации в качестве указателя на исходное положение элемента и горизонтальное вращение, которые помогают продемонстрировать изменения элемента и глубину.

2d scale

Демонстрация scale

Демонстрация множественного масштабирования

2d translate

Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение элемента по вертикальной оси.

Демонстрация translate

2d skew

Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.

Демонстрация skew

Комбинация трансформаций

Типично использовать несколько преобразований за раз, к примеру, поворот и масштабирование размера элемента одновременно. В этом случае несколько преобразований могут быть скомбинированы вместе. Для их объединения значения идут списком в свойстве transform один за другим без использования запятых.

Применение нескольких деклараций transform не будет работать, так как каждая декларация перезапишет всё над ним. Поведение в этом случае такое же, как если бы вы установили height для элемента несколько раз.

Демонстрация комбинации транформаций

Демонстрация двумерного куба

Точка трансформации

Свойство transform-origin может принимать одно или два значения. Когда задано только одно значение, то оно используется для горизонтальной и вертикальной осях. Если указаны два значения, то первое применяется для горизонтальной оси, а второе для вертикальной.

Демонстрация transform-origin

Следует отметить, что свойство transform-origin в действительности порождает некоторые проблемы, когда одновременно применяется значение translate у трансформации. Так как они оба пытаются позиционировать элемент, их значения могут вступать в противоречие. Используйте их с осторожностью, лишний раз убедившись что получен желаемый результат.

Перспектива

Чтобы трёхмерные преобразования работали, элементы нуждаются в перспективе, относительно которой происходит трансформация. Перспектива для каждого элемента может быть представлена как точка схождения, подобно тому, что можно увидеть в трёхмерных чертежах.

Перспектива для элемента может быть задана двумя разными способами. Один из них включает в себя использование значения perspective в свойстве transform для отдельных элементов, а другой включает в себя использование свойства perspective для родительского элемента, внутри которого трансформируются дочерние элементы.

Использование значения perspective в свойстве transform прекрасно работает для преобразования одного элемента относительно единичной уникальной перспективы. Если вы желаете преобразовать группу элементов с одинаковой перспективой или точкой схода, то применяйте свойство perspective для их родительского элемента.

Демонстрация значения perspective

В следующем примере показано несколько элементов рядом друг с другом, все преобразованы с использованием одной перспективы, добавленной с помощью свойства perspective к их прямому родительском элементу.

Демонстрация свойства perspective

Глубина перспективы

В качестве значения перспективы может быть задано none или длина. Значение none отключает любую перспективу, в то время как значение длины установит глубину перспективы. Чем выше значение, тем дальше вид перспективы, создавая тем самым перспективу довольно низкой интенсивности и небольшое трёхмерное изменение. Низкое значение приближает вид перспективы, тем самым создавая перспективу высокой интенсивности и большое трёхмерное изменение.

Представьте что вы стоите в трёх метрах от трёхметрового куба и сравните его с тем же кубом, стоя в 300 метрах от него. На трёх метрах ваше расстоянии до куба такое же, что и размеры куба, поэтому сдвиг перспективы значительно больше, чем на расстоянии 300 метров, где размеры куба составляют лишь одну сотую вашего расстояния до куба. Те же самые размышления применяются к значениям глубины перспективы.

Демонстрация глубины перспективы

Начало перспективы

Демонстрация perspective-origin

Трёхмерная трансформация

Работая с двумерной трансформацией мы можем менять элементы по горизонтальной и вертикальной осям, однако есть и другая ось, вдоль которой мы можем трансформировать элементы. С помощью трёхмерных преобразований мы можем менять элементы по оси z, что даёт нам контроль глубины, а также длины и ширины.

3d rotate

Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.

Демонстрация 3d rotate

3d scale

Демонстрация 3d scale

3D translate

Демонстрация 3d translate

3D skew

skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.

Сокращённые трёхмерные трансформации

transform-style

Свойство transform-style должно быть добавлено к родительскому элементу, выше любых вложенных преобразований. Значение preserve-3d позволяет преобразованным дочерним элементам появляться в их собственной трёхмерной плоскости, в то время как значение flat заставляет преобразованные дочерние элементы лежать в двухмерной плоскости.

Демонстрация transform-style

Чтобы увидеть дополнительный пример использования свойства transform-style в действии прочитайте объяснение WebKit.

backface-visibility

Источник