1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: transform
slug: Web/CSS/transform
tags:
- CSS
- transform
- Вёрстка
- Свойство CSS
- наклон
- поворот
- трансформация
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>transform</code></strong> позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS <a href="/en-US/docs/Web/CSS/Visual_formatting_model">визуальной форматируемой модели</a>.</p>
<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
<p>Если свойство имеет значение, отличное от <code>none</code>, будет создан <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">контекст наложения</a>. В этом случае, элемент будет действовать как <a href="/en-US/docs/Web/CSS/Containing_block">содержащий блок</a> для любых элементов <code>position: fixed;</code> или <code>position: absolute;</code> которые он содержит.</p>
<div class="warning">
<p>Только трансформируемый элемент может быть <code>transform</code>. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">неизменяемые инлайновые блоки</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col">блоки таблица-колонка</a>, и <a href="/en-US/docs/Web/HTML/Element/colgroup">блоки таблица-колонка-группа</a>.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: 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;
</pre>
<p>Свойство <code>transform</code> может быть указано как значение ключевого слова <code><a href="#none">none</a></code> или как одно или более значений <code><a href="#<transform-function>"><transform-function></a></code>.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt>
<dd>Одна или более применяемых <a href="/en-US/docs/Web/CSS/transform-function">функций CSS-трансформации</a>. Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.</dd>
<dt id="none"><code>none</code></dt>
<dd>Указывает, что трансформация не должна применяться.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<p>Если {{cssxref("transform-function/perspective", "perspective()")}} является одним из мультифункциональных значений, оно должно быть указано первым.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>Transformed element</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Примеры", "400", "160")}}</p>
<p>Для того, чтобы посмотреть другие примеры, обратитесь к <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Использование CSS-трансформации</a> и {{cssxref("<transform-function>")}}.</p>
<h2 id="Accessibility_concerns">Accessibility concerns</h2>
<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определённых типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p>
<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте её для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p>
<p>Узнать больше:</p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
</ul>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Добавлены 3D-функции трансформации.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>Первое определение.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("css.properties.transform")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_transforms">Использование CSS-трансформации</a></li>
<li>{{cssxref("<transform-function>")}} типы данных</li>
<li><a href="https://louisremi.github.io/jquery.transform.js/">Плагин jQuery для кросс-браузерной 2D-трансформации</a></li>
</ul>
|
