This page was translated from English by the community. Learn more and join the MDN Web Docs community.
transform
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.
Интерактивный пример
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. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа.
Синтаксис
/* Ключевые слова */
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> +
Если 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 — используйте её для написания медиавыражения, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
Узнать больше:
Спецификации
| Specification |
|---|
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |
| Начальное значение | none |
|---|---|
| Применяется к | трансформируемые элементы |
| Наследуется | нет |
| Проценты | ссылается на размер ограничительной рамки |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | трансформация |
| Создаёт контекст наложения | да |
Совместимость с браузерами
Loading...