1. Home
  2. /
  3. Уроки css
  4. /
  5. Свойства transform и transition

Свойства transform и transition

Свойство transform — применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

Элемент можно передвигать, масштабировать, поворачивать и наклонять.

Допустимые значения

  • none — элемент не трансформируется
  • <функция> — элемент трансформируется согласно одной из следующих функций:
    • matrix(<число>, <число>, <число>, <число>, <число>, <число>) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • matrix3d(<число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
    • translate(<значение>) — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
    • translate3d(<значение>, <значение>, <значение>) — определяет сдвиг элемента по оси x, по оси y и по оси z
    • translateX(<значение>) — определяет сдвиг элемента по оси x
    • translateY(<значение>) — определяет сдвиг элемента по оси y
    • translateZ(<значение>) — определяет сдвиг элемента по оси z
    • scale(<число>) — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
    • scale3d(<число>, <число>, <число>) — определяет масштаб элемента по оси x, по оси y и по оси z
    • scaleX(<число>) — определяет масштаб элемента по оси x
    • scaleY(<число>) — определяет масштаб элемента по оси y
    • scaleZ(<число>) — определяет масштаб элемента по оси z
    • rotate(<угол>) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
    • rotate3d(<число>, <число>, <число>, <угол>) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элемент поворачивается относительно точки, заданной свойством transform-origin
    • rotateX(<число>) — определяет угол поворота элемента по оси x
    • rotateY(<число>) — определяет угол поворота элемента по оси y
    • rotateZ(<число>) — определяет угол поворота элемента по оси z
    • skew(<угол>) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
    • skewX(<угол>) — определяет угол наклона элемента по оси x.
    • skewY(<угол>) — определяет угол наклона элемента по оси y.
    • perspective(<глубина>) — расстояние в пикселях от зрителя до плоскости z = 0.

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer 10
9
-ms-
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
3.5
-moz-
Safari 4 и выше
3.1
-webkit-

Свойство transform-origin — задает координаты центра трансформации.

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

Допустимые значения

  • <значение> — абсолютное значение расстояния от левого верхнего угла элемента в плоскости z=0 до координат центра трансформации. Координату z можно задать только абсолютной величиной
  • <процент> — расстояние от левого верхнего угла элемента до координаты центра трансформации в процентах от размера элемента (координата по оси x вычисляется в процентах от ширины элемента, а координата по оси y — от высоты)
  • left — координата по оси x равна 0 (трансформация по оси x происходит относительно левой стороны элемента)
  • right— координата по оси x равна 100% или ширине элемента (трансформация по оси x происходит относительно правой стороны элемента)
  • top— координата по оси y равна 0 (трансформация по оси y происходит относительно верхней стороны элемента)
  • bottom — координата по оси y равна 100% (трансформация по оси y происходит относительно нижней стороны элемента)
  • center — координата по оси x равна 50% (трансформация по оси x происходит относительно центра элемента). Если перед этим значением идет значение left или right, задает координату по оси y равную 50%. Если после этого значения идет значение top или bottom, задает координату по оси x равную 50%. Если эти константы отсутствуют, задает значение равное 50% по обеим осям

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer 10
9
-ms-
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
3.5
-moz-
Safari 4 и выше
3.1
-webkit-

Свойство transition — сокращенный способ задать свойства перехода transition-property, transition-duration,transition-timing-function и transition-delay, позволяет одновременно задать свойство, к изменению которого будет применен плавный переход, время, в течение которого этот переход будет совершаться, способ расчета промежуточных значений перехода и задержку перед переходом.

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

Свойство transition-property

задает свойство, для которого будет совершаться анимированный переход. Можно указать несколько через запятую. Например transition-property:width,height.

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • none — анимированный переход совершаться не будет
  • all — анимированный переход будет совершаться для всех изменяющихся свойств
  • <свойство> — имя свойства, для которого будет совершаться анимированный переход

Свойство transition-duration

указывает какое количество времени занимает анимированный переход (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • <значение> — точное значение времени перехода. Задается в секундах s или в миллисекундах ms

Свойство transition-timing-function

Свойство transition-timing-function описывает метод расчета промежуточных значений свойств при анимированном переходе (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

Возможные значения свойства представляют собой различные кривые Безье третьего порядка, заданные координатами четырех точек. Координаты начальной точки P0(0;0), координаты конечной точки P3(1;1). Координаты промежуточных точек P1(x1;y1) P2(x2;y2) заданны четырьмя значениями свойства в порядке (x1;y1;x2;y2). Координаты могут принимать значения от 0 до 1.
  • ease — кривая Безье 3-го порядка с координатами P1(0.25, 0.1) P2(0.25, 1.0)
  • linear — кривая Безье 3-го порядка с координатами P1(0.0, 0.0) P2(1.0, 1.0)
  • ease-in — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(1.0, 1.0)
  • ease-out — кривая Безье 3-го порядка с координатами P1(0, 0) P2(0.58, 1.0)
  • ease-in-out — кривая Безье 3-го порядка с координатами P1(0.42, 0) P2(0.58, 1.0)
  • cubic-bezier (<число>, <число>, <число>, <число>) — кривая Безье 3-го порядка с координатами P1(x1, y1) P2(x2, y2).Где x1,y1,x2,y2 — произвольные значения координат заданные пользователем (в промежутке от 0 до 1). Для получения значений cubic-bezier можно использоватьгенератор transition-timing-function: cubic-bezier
    и второй вариант CSS cubic-bezier Builder

Свойство transition-delay

указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).

Анимированный переход будет совершаться при динамическом изменении свойств элемента, указанных в transition-property.

Допустимые значения

  • <значение> — точное значение временной задержки перед переходом. Задается в секундах s или в миллисекундах ms

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


IE

Opera

Chrome

Firefox

Safari
Internet Explorer
Ишак
не поддерживает
Opera 12 и выше
10.5
-o-
Chrome 4 и выше
2
-webkit-
Firefox 16 и выше
4
-moz-
Safari 4 и выше
3.1
-webkit-

предыдущий
следующий


  1. Home
  2. /
  3. Уроки css
  4. /
  5. Свойства transform и transition

Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика