From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/transform/index.html | 155 ++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/ru/web/css/transform/index.html (limited to 'files/ru/web/css/transform/index.html') diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html new file mode 100644 index 0000000000..d599420c00 --- /dev/null +++ b/files/ru/web/css/transform/index.html @@ -0,0 +1,155 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - transform + - Верстка + - Свойство CSS + - наклон + - поворот + - трансформация +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

+ +
{{EmbedInteractiveExample("pages/css/transform.html")}}
+ + + +

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

+ +
+

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

+
+ +

Синтаксис

+ +
/* Значения ключевым словом*/
+transform: none;
+
+/* Значения функций */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+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.0, 3.0, 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>.

+ +

Значения

+ +
+
{{cssxref("<transform-function>")}}
+
Одна или более применяемых функций CSS-трансформации. Функции трансформации  умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.
+
none
+
Указывает, что трансформация не должна применяться.
+
+ +

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

+ +
{{csssyntax}}
+ +

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

+ +

Примеры

+ +

HTML

+ +
<div>Transformed element</div>
+ +

CSS

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

Результат

+ +

{{EmbedLiveSample("Примеры", "400", "160")}}

+ +

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

+ +

Accessibility concerns

+ +

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

+ +

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

+ +

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

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Добавлены 3D-функции трансформации.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Первое определение.
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.transform")}}

+ +

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

+ + -- cgit v1.2.3-54-g00ecf