transform

Интерактивный пример

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Если свойство имеет значение, отличное от none, будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

Синтаксис

/* Ключевые слова */
transform: none;

/* Значения функций */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Мультифункциональные значения */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Глобальные значения */
transform: inherit;
transform: initial;
transform: unset;

Свойство transform может быть указано как значение ключевого слова none или как одно или более значений <transform-function>.

Значения

<transform-function>

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

none

Указывает, что трансформация не должна применяться.

Формальный синтаксис

transform = 
  none              |
  <transform-list>  

<transform-list> = 
  <transform-function>+  

<transform-function> = 
  <scale()>                |
  <scaleX()>               |
  <scaleY()>               |
  <scaleZ()>               |
  <translate3d()>          |
  <translate()>            |
  <translateX()>           |
  <translateY()>           |
  <translateZ()>           |
  <rotate3d()> <rotate()>  |
  <rotateX()>              |
  <rotateY()>              |
  <rotateZ()>              |
  <skew()>                 |
  <skewX()>                |
  <skewY()>                |
  <matrix3d()>             |
  <matrix()>               |
  <perspective()>          

<scale()> = 
  scale( <number> , <number>? )  

<scaleX()> = 
  scaleX( <number> )  

<scaleY()> = 
  scaleY( <number> )  

<scaleZ()> = 
  scaleZ( [ <number> | <percentage> ] )  

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<translateX()> = 
  translateX( <length-percentage> )  

<translateY()> = 
  translateY( <length-percentage> )  

<translateZ()> = 
  translateZ( <length> )  

<rotate3d()> = 
  rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )  

<rotate()> = 
  rotate( [ <angle> | <zero> ] )  

<rotateX()> = 
  rotateX( [ <angle> | <zero> ] )  

<rotateY()> = 
  rotateY( [ <angle> | <zero> ] )  

<rotateZ()> = 
  rotateZ( [ <angle> | <zero> ] )  

<skew()> = 
  skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )  

<skewX()> = 
  skewX( [ <angle> | <zero> ] )  

<skewY()> = 
  skewY( [ <angle> | <zero> ] )  

<matrix3d()> = 
  matrix3d( <number>#{16} )  

<matrix()> = 
  matrix( <number>#{6} )  

<perspective()> = 
  perspective( [ <length [0,∞]> | none ] )  

<length-percentage> = 
  <length>      |
  <percentage>  

Если perspective() является одним из мультифункциональных значений, оно должно быть указано первым.

Примеры

HTML

<div>Transformed element</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

Результат

Для того, чтобы посмотреть другие примеры, обратитесь к Использование CSS-трансформации и <transform-function>.

Accessibility concerns

Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определённых типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.

Кроме того, рассмотрите возможность использования @media-опции prefers-reduced-motion — используйте её для написания медиавыражения, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.

Узнать больше:

• MDN Understanding WCAG, Guideline 2.3 explanations
• Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

Спецификации

Совместимость с браузерами

Смотрите также

• Использование CSS-трансформации
• <transform-function> типы данных
• Плагин jQuery для кросс-браузерной 2D-трансформации