transform:rotate(x) — вращение объекта
Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg
Пример #1. Вращение объекта в html через трансформацию
На странице преобразуется в следующее
Примечание
Свойства:
Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.
Пример #2. Вращение объекта в html при наведении курсора
Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).
На странице преобразуется в следующее
Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.
Пример #3. Плавное вращение при наведении курсора (анимация) в html
Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear
На странице преобразуется в следующее
Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.
Классы преобразования
Windows Presentation Foundation (WPF) предоставляет следующие двумерные Transform классы для общих операций преобразования:
| Класс | Описание | Пример | Иллюстрация |
|---|---|---|---|
| RotateTransform | Поворачивает элемент на указанный Angle объект. | Вращение объекта | |
| ScaleTransform | Масштабирует элемент по заданному ScaleX и ScaleY сумме. | Масштабирование элемента | |
| SkewTransform | Наклоняет элемент на указанные AngleX величины и AngleY . | Наклон элемента | |
| TranslateTransform | Перемещает (преобразует) элемент по заданному X и Y сумме. | Перемещение элемента |
для создания более сложных преобразований Windows Presentation Foundation (WPF) предоставляет следующие два класса:
| Класс | Описание | Пример |
|---|---|---|
| TransformGroup | Группирует несколько TransformGroup объектов в один Transform , который затем можно применить к свойствам преобразования. | Применение нескольких преобразований к объекту |
| MatrixTransform | Создает пользовательские преобразования, которые не предоставляются другими Transform классами. При использовании MatrixTransform , вы напрямую управляете матрицей. | Использование MatrixTransform для создания пользовательских преобразований |
Windows Presentation Foundation (WPF) также предоставляет трехмерные преобразования. Дополнительные сведения см. в описании класса Transform3D.
Использование различных видов анимации
В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.
При событии :hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.
#stage
#block
Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.
Также обратите внимание, что изменение цвета происходит до поворота. Фишка в том, что вы можете разбить -webkit-transition на несколько записей:
Фишка в том, что вы можете разбить -webkit-transition на несколько записей:
#block {
...
background: blue;
...
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
...
}
#stage:hover #block {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
}
Трёхмерная трансформация
Работая с двумерной трансформацией мы можем менять элементы по горизонтальной и вертикальной осям, однако есть и другая ось, вдоль которой мы можем трансформировать элементы. С помощью трёхмерных преобразований мы можем менять элементы по оси z, что даёт нам контроль глубины, а также длины и ширины.
3d rotate
До сих пор мы обсуждали, как повернуть объект по часовой или против часовой стрелки на плоской поверхности. С помощью трёхмерных преобразований мы можем вращать элемент вокруг любых осей. Для этого мы используем три новые значения, включая rotateX, rotateY н rotateZ.
Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.
В случае общего значения rotate, описанного ранее, положительные значения поворачивают элемент вокруг его выделенной оси по часовой стрелке, а отрицательные значения поворачивают элемент против часовой стрелки.
HTML
CSS
3d scale
При использовании scaleZ для трёхмерных преобразованиях элементы могут масштабироваться по оси z. Это не очень интересно, когда никаких других трёхмерных преобразований нет, так как нечего, в частности, и масштабировать. В демонстрации ниже масштаб элементов увеличивается и уменьшается по оси z, при этом добавляется значение rotateX, чтобы увидеть поведение scaleZ. При удалении rotateX элементы будут выглядеть не изменёнными.
HTML
CSS
3D translate
Элементы могут также передвигаться по оси z с помощью значения translateZ. Отрицательное значение будет толкать элемент дальше по оси z, что приводит к уменьшению элемента. Положительное значение будет тянуть элемент ближе по оси z, что приводит к увеличению элемента.
Хотя это может показаться очень похоже на двумерную трансформацию scale, на самом деле у них есть различия. Преобразование происходит по оси z, а не по осям х или у. При работе с трёхмерными преобразованиями возможность переместить элемент по оси z даёт серьёзные преимущества, как при построении куба в примере ниже.
HTML
CSS
3D skew
skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.
Сокращённые трёхмерные трансформации
Как и в случае комбинаций двумерных преобразований, есть также значения для записи сокращённых трёхмерных преобразований. Эти значения включают rotate3d, scale3d, transition3d и matrix3d. Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!
css-свойство transform-origin
С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались
Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой
центром (точкой) трансформации. По умолчанию трансформация элемента происходит
относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см
рис №11). Однако эту точку можно
смещать, изменяя ее координаты X, Y и Z
(координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css-свойства
transform-origin, которое используется совместно с
transform.
Рис. №11. Расположение центра трансформации по умолчанию
В качестве значений transform-origin принимает через пробел координаты
X, Y и Z центра трансформации (см. пример №12).
Для них разрешается использовать:
-
для координаты X – любые доступные в CSS
единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова
left (эквивалентно 0% по оси X),
center (эквивалентно 50% по оси X) или
right (эквивалентно 100% по оси X); -
для координаты Y – любые доступные в CSS
единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова
top (эквивалентно 0% по оси Y),
center (эквивалентно 50% по оси Y) или
bottom (эквивалентно 100% по оси Y). -
для координаты Z – любые доступные в CSS
единицы измерения длины, исключая проценты и ключевые слова.
Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров.
При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству
transform-origin только одно значение, то оно будет считаться координатой X,
если два, то X и Y (соответственно неуказанные координаты примут значения
по умолчанию).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство transform-origin</title>
<style>
/* Оформляем родительский «div» абзацев */
div{
width: 550px;
height: 550px;
margin: auto;
padding: 40px;
background-color: #DFDFDF;
border-radius: 5px;
}
/* Это общий стиль абзацев */
p{
width: 320px;
margin: auto;
margin-top: 20px;
padding: 20px;
background-color: #55aa55;
border-radius: 5px;
text-align: center;
font-weight: bold;
color: #F9F9F9;
}
/* Это класс 1-го трансформируемого абзаца */
.p_1{
transform: perspective(300px) rotateX(0.3rad);
}
/* Это класс 2-го трансформируемого абзаца */
.p_2{
transform-origin: 0% 0px;
transform: perspective(300px) rotateX(0.3rad);
}
/* Это класс 3-го трансформируемого абзаца */
.p_3{
transform-origin: -150% 130% 0px;
transform: perspective(300px) rotateX(0.3rad);
}
/* Это класс 4-го трансформируемого абзаца */
.p_4{
transform-origin: 150% -130% 100px;
transform: perspective(300px) rotateX(0.3rad);
}
</style>
</head>
<body>
<div>
<p>
Простой абзац.
</p>
<p class="p_1">
1-й трансформированный абзац: <br>
transform-origin: 50% 50%
</p>
<p class="p_2">
2-й трансформированный абзац: <br>
transform-origin: 0% 0px
</p>
<p class="p_3">
3-й трансформированный абзац: <br>
transform-origin: -150% 130% 0px
</p>
<p class="p_4">
4-й трансформированный абзац: <br>
transform-origin: 150% -130% 100px
</p>
</div>
</body>
</html>
Пример №12. Пример использования css-свойства transform-origin
Обязательно поэкспериментируйте с данным примером, попробовав различные варианты координат центра трансформации. Используйте различные единицы
измерения, а также ключевые слова. Не забывайте, что для координаты Z нельзя использовать проценты и ключевые слова.
Поворот
Трансформации CSS3 являются новой и экспериментальной возможностью. Поэтому при их использовании нужно указывать несколько версий свойства transform, каждую со своим префиксом разработчика браузеров. Далее приведен пример правила трансформации для вращения элемента со всем его содержимым:
В предыдущем примере с помощью свойства трансформаций transform задается функция rotate(), которая вращает элемент на 45° вокруг его центра:
Применение трансформации к какому-либо элементу страницы не влияет на другие ее элементы или ее компоновку. Например, если повернуть элемент, то он просто надвинется на смежные с ним элементы, как показано на рисунке выше.
Обратите внимание, что в предыдущем примере угол поворота задавался в градусах. Спецификация CSS3 предлагает возможность задавать угол и в других математических величинах:
| Единица измерения | CSS3-обозначение | Описание | Пример |
|---|---|---|---|
| Градусы | deg | Угол полной окружности 360° | rotate(90deg) |
| Грады | grad | Единица измерения плоских углов, равная 1/400 угла полной окружности или π/200 | rotate(100grad) |
| Радианы | rad | 2π радиан равно углу полной окружности | rotate(1.57rad) |
| Обороты | turn | 1 угол полной окружности равен одному обороту | rotate(.25turn) |
Ниже показан пример правила таблицы стилей в котором используется такая же трансформация как и раньше, только с заданием другой единицы измерения:
Поддержка 3D-преобразований CSS3
Метод преобразования элемента в трех измерениях с помощью свойства CSS transform включает поддержку свойства perspective для установки перспективы в z-пространстве и свойства backface-visibility для переключения отображения обратной стороны преобразуемого элемента.
Текущий статус: рабочий проект W3C
Поддерживается со следующих версий:
| Стационарные | Мобильные | ||||||||
| Chrome 12 * | Firefox 10 * | IE 15 * | Opera 4 * | Safari 3.1 * | Chrome 3.2 * | Firefox 3 * | IE 37 | Opera 54 | Safari 50 |
| Поддержи-вается | Поддержи-вается | Частично | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается | Поддержи-вается |
* — требуется префикс.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!
Вадим Дворниковавтор-переводчик статьи «transform»
scale
The value allows you to increase or decrease the size of an element.
For example, the value would transform the size to be 2 times its original
size. The value would transform the size to be half its original size.
See the Pen Transform: Scale by Rachel
Cope (@rachelcope) on CodePen.
You can scale an element by setting parameters for the width (X-axis) or height
(Y-axis). For example, .
Or, use the shorthand to scale both axes at the same time: . Or define them independently of each other:
Don’t forget to add a transition! Without applying transition, the element would
abruptly change sizes. Add the transition to the parent selector (not the
hover selector). To make the transition smooth on both hover-over/hover-off.
Значения свойства
| Значение | Описание |
|---|---|
| none | Преобразование не применяется. |
| matrix(n,n,n,n,n,n) | Применяет 2D преобразование с помощью матрицы из шести значений. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений. |
| translate(x,y) | Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа. |
| translate3d(x,y,z) | Применяет 3D смещение. |
| translateX(x) | Определяет смещение, только по оси Х. |
| translateY(y) | Определяет смещение, только по оси У. |
| translateZ(z) | Определяет 3D смещение, только по оси Z. |
| scale(x,y) | Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент. Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin. |
| scale3d(x,y,z) | Применяет 3D преобразование масштаба. |
| scaleX(x) | Определяет преобразование масштаба по оси Х. |
| scaleY(y) | Определяет преобразование масштаба по оси У. |
| scaleZ(z) | Определяет 3D преобразование масштаба по оси Z. |
| rotate(angle) | Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента. |
| rotate3d(x,y,z,angle) | Определяет 3D поворот. |
| rotateX(angle) | Определяет 3D поворот вдоль оси Х. |
| rotateY(angle) | Определяет 3D поворот вдоль оси У. |
| rotateZ(angle) | Определяет 3D поворот вдоль оси Z. |
| skew(x, y) | Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X. |
| skewX(angle) | Определяет 2D преобразование наклона вдоль оси Х. |
| skewY(angle) | Определяет 2D преобразование наклона вдоль оси У. |
| perspective(n) | Определяет перспективу для преобразования 3D элемента. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
CSS Свойство:
transform:
Результат:
Демонстрация работы свойтсва transform.
CSS Код:
#myDIV { background-color: lightblue; transform: rotate(10deg); }
Кликните на любое значение свойства, чтобы увидеть результат
Функция perspective()
Рассмотренные выше примеры функций позволяют трансформировать элементы на плоскости. Однако в CSS имеются
возможности осуществлять и 3D-трансформации, добавляя третье измерение к веб-страницам.
Одной из таких возможностей является функция perspective(), которая задает
глубину просмотра (3d-перспективу), т.е. расстояние по оси Z от плоскости
экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).
Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы
Масштабирование элемента пропорционально d/(d–z), где d (значение перспективы)
— это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z — координата
желаемого расположения плоскости элемента на оси Z, направленной к пользователю. Так на верхнем рисунке,
чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен
пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь
z=d/2). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг
на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть,
т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2).
В качестве параметра функция perspective() принимает любые доступные в CSS
единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение,
тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения
эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю).
Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если
перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей
X и Y или его перемещение вдоль оси Z.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Функция трансформации perspective()</title>
<style>
/* Оформляем родительский «div» абзацев */
div{
width: 550px;
height: 550px;
margin: auto;
padding: 40px;
background-color: #DFDFDF;
border-radius: 5px;
}
/* Это общий стиль абзацев */
p{
width: 320px;
margin: auto;
margin-top: 20px;
padding: 30px;
background-color: #55aa55;
border-radius: 5px;
text-align: center;
font-weight: bold;
color: #F9F9F9;
}
/* Это класс 1-го трансформируемого абзаца */
.p_1{transform: perspective(0px) rotateX(20deg);}
/* Это класс 2-го трансформируемого абзаца */
.p_2{transform: perspective(400px) rotateX(20deg);}
/* Это класс 3-го трансформируемого абзаца */
.p_3{transform: perspective(200px) rotateX(20deg);}
/* Это класс 4-го трансформируемого абзаца */
.p_4{transform: perspective(100px) rotateX(20deg);}
</style>
</head>
<body>
<div>
<p>
Простой абзац.<br>
</p>
<p class="p_1">
1-й трансформированный абзац: <br>
transform: perspective(0px) rotateX(20deg)
</p>
<p class="p_2">
2-й трансформированный абзац: <br>
transform: perspective(400px) rotateX(20deg)
</p>
<p class="p_3">
3-й трансформированный абзац: <br>
transform: perspective(200px) rotateX(20deg)
</p>
<p class="p_4">
4-й трансформированный абзац: <br>
transform: perspective(100px) rotateX(20deg)
</p>
</div>
</body>
</html>
Пример №7. Функция трансформации perspective()
Обязательно поэкспериментируйте с данным примером: попробуйте повороты вокруг оси Y, поизменяйте угол поворота,
затем замените функцию трансформации на translateZ и также поизменяйте ее значения.
Skewing (Distortion)
Skews an element on the 2D plane.
The skew() CSS function defines a transformation that skews an element on the 2D plane.
This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.
The skew() function is specified with either one or two values, which represent the amount of skewing to be applied in each direction.
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew
: Skews an element in the horizontal direction.
The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane.
This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. The abscissa coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX
Skews an element in the vertical direction.
The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane.
This transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. The ordinate coordinate of each point is modified by a value proportionate to the specified angle and the distance to the origin; thus, the farther from the origin a point is, the greater will be the value added it.
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY
2D преобразования
В этой главе вы узнаете 2D метод преобразования:
- переводить ()
- вращаться ()
- Шкала ()
- Перекос ()
- матрица ()
В следующей главе вы узнаете 3D преобразование.
примеров
ДИВ { преобразования: вращаться (30 град) ; — Ms-преобразования: вращаться (30 град) WebKit-преобразования: вращаться (30 град) / * Safari и Chrome * / }
Попробуйте »
перевод метод ()
переводить () метод, в соответствии с левой (ось х) и верхней (Y-ось) положение данного параметра, перемещается из текущего положения элемента.
примеров
ДИВ { преобразования: переводить (50 точек, 100 точек) ; — Ms-преобразования: переводить (50 точек, 100 точек) WebKit-преобразования: переводить (50 точек, 100 точек) / * Safari и Chrome * / }
Попробуйте »
перевести значение (50px, 100px) представляет собой подвижный элемент 50 пикселей слева, и переехал на 100 пикселей сверху.
вращать метод ()
вращать метод (), в заданном количестве градусов по часовой стрелке вращения элементов. Отрицательное значение допустимо, это вращение против часовой стрелки из элементов.
примеров
ДИВ { преобразования: вращаться (30 град) ; — Ms-преобразования: вращаться (30 град) WebKit-преобразования: вращаться (30 град) / * Safari и Chrome * / }
Попробуйте »
Rotate значение (30deg) элементов поворачивается на 30 градусов по часовой стрелке.
масштабный метод ()
Шкала () метод, который увеличить или уменьшить размер элемента, в зависимости от ширины (ось Х) и высоты (Y ось) параметры:
примеров
-MS-преобразования: масштаб (2,3) ; / * IE 9 * / -webkit-преобразования: масштаб (2,3); / * Safari * / преобразования: масштаб (2,3); / *
Попробуйте »
шкала (2,3) ширина перехода в два раза его первоначальный размер, и в три раза больше его первоначальной высоты.
Перекос () метод
Метод перекос () элемент в соответствии с поперечной (ось Х) и вертикальных параметров линии (ось Y) для заданного угла:
примеров
ДИВ { преобразования: косое (30 град, 20 град) ; — Ms-преобразования: косое (30 град, 20 град) WebKit-преобразования: косое (30 град, 20 град) / * Safari и Chrome * / }
Попробуйте »
косое (30deg, 20deg) является элементом оси Х и Y оси около 20 градусов около 30 градусов.
матричный метод ()
матричный метод () и метод преобразования 2D объединены в одну.
матричный метод имеет шесть параметров, включая функции наклона поворот, масштабирование, перемещение (панорамирование) и.
примеров
Использование матрицы () метод вращающегося Div элемент 30 °
ДИВ { преобразование: матрица (0,866, 0,5, — 0,5, 0,866, 0, 0) ; — Ms-преобразование: матрица ( 0,866, 0,5, — 0,5, 0,866, 0, 0) WebKit-преобразования: матрица (0,866, 0,5, — 0,5, 0,866, 0, 0) / * Safari и Chrome * / }
Попробуйте »
Новое свойство преобразования
Ниже приведен список всех свойств преобразования:
| свойство | описание | CSS |
|---|---|---|
| преобразование | Применить 2D или 3D элемент преобразования | 3 |
| преобразовании происхождения | Это позволяет изменить положение элемента преобразования | 3 |
метод преобразования 2D
| функция | описание |
|---|---|
| матрица (п, п, п,п, п, п) | Определение 2D-преобразование, используя матрицу из шести значений. |
| переводить(х, у) | 2D преобразования определяется вдоль X и Y оси подвижных элементов. |
| translateX(п) | Определить элемент преобразования 2D вдоль оси X. |
| translateY(п) | 2D преобразование определяется вдоль подвижных элементов Y-оси. |
| шкала(х, у) | Определить масштабное преобразование 2D, изменить ширину и высоту элемента. |
| Scalex(п) | Определить масштабное преобразование 2D, изменить ширину элемента. |
| ScaleY(п) | Определение 2D масштабное преобразование, изменение высоты элемента. |
| Поворот(угол) | Определить 2D поворачивается на заданный угол в аргументе. |
| косое (х-угол, у-угол) | Определить 2D перекоса преобразование вдоль осей Х и Y. |
| skewX(угол) | 2D перекос преобразование определяется, вдоль оси Х. |
| skewY(угол) | Определение 2D перекос преобразование вдоль оси ординат. |
Вращение и масштабирование текста
Применение одновременно двух трансформаций для текста — вращение и масштабирование. Операции преобразования над текстом производятся с помощью тех же инструментов что и трансформации элементов. Это классы вращения RotateTransform и масштабирования ScaleTransform. Трансформация выполняется в виде красивой анимации.
Текстом владеет элемент TextBlock, стоит подчеркнуть, что в этом примере трансформируется только сам текст. Как птичка из гнезда, вылетает текст из области TextBlock и возвращается вновь. Для элементов TextBlock можно определить текстовые эффекты с помощью его свойства TextEffects. Данное свойство имеет тип TextEffectCollection и позволяет одновременно применять различные эффекты к тексту.
Составная трансформация
Элементам можно присвоить только одну трансформацию. При необходимости нескольких трансформаций одновременно можно создать составную трансформацию. Для этого в распоряжении библиотек WPF имеется класс комбинирования преобразований TransformGroup. Через свойство Children данного класса добавляются необходимые виды трансформаций. В результате TransformGroup создаёт единую MatrixTransform, объединяя все трансформации из коллекции Children.
TextEffect для управления текстом
Логика составной трансформации определена программным кодом в методе события MouseDown главного контейнера закладки TabControl. Для красивого эффекта необходимо чтобы текст вращался и изменялся в размерах относительно своей середины. Чтобы не измерять длину текста применена простая хитрость — габариты текста определяет TextBlock в режиме автоматической подгонки размера. Вращение и масштабирование текста осуществляется посредством объекта класса TextEffect, который непосредственно воздействует на символы. Не только на весь текст, но и на отдельные символы.
Система координат
Каждый элемент в CSS имеет систему координат, начало которой размещается в левом верхнем углу элемента.
При применении CSS transform начало системы координат переносится в центр элемента. Это происходит потому, что значение свойства transform-origin, применяемое по умолчанию, равно 50%50. После этого все преобразования применяются к элементу на основании нового положения системы координат.
Исходная система координат и система координат при применении transform со значением свойства transform-origin, применяемым по умолчанию
С помощью свойства transform-origin можно указать, куда необходимо перенести начало координат. В зависимости от эффекта преобразования используются различные исходные положения преобразования.
Если с помощью свойства transform вы вращаете или наклоняете элемент, то же самое происходит с системой координат, и все последующие преобразования будут применяться на основе новой системы координат. Поэтому порядок преобразований имеет значение, разные последовательности приведут к различным преобразованиям. Это имеет смысл, потому что преобразования переводятся в матрицы, а умножение двух матриц в математике дает разные результаты в зависимости от порядка этих матриц. Например, а х b не дает тот же результат, что b х а (если ни одна из них не является единичной).
Если нужно переместить элемент с помощью CSS text transform в другое положение и повернуть его в новом положении, вы должны сделать это в указанном порядке: переместить, а затем повернуть. Если вы повернете элемент, то повернется его система координат, и перемещение в определенном направлении не приведет к ожидаемому результату.
Если вы повернете элемент на 90 градусов вокруг оси у, например, то его ось х будет указывать вглубь экрана, в противоположном от вас направлении. Таким образом, если после этого вы примените перемещение вдоль оси х, элемент не будет перемещаться вправо, он будет удаляться от вас
Поэтому при преобразованиях важно обращать внимание на порядок, в котором указаны функции свойства transform. Первая функция будет применяться первой, а последняя будет применена последней
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Fallback FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
image-rendering
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
