Сочетание css-свойств: transform, translate, rotate, scale и offset
Содержание:
- Трехмерный сдвиг элементов
- Функция perspective()
- Property Values
- Какие возможности предоставляют отдельные свойства преобразования?
- Пример использования
- Skewing (Distortion)
- 2D-трансформации элементов
- Функции двухмерной трансформации transform
- Scaling (Resizing)
- The rotateZ() Method
- CSS Transform Properties
- CSS 3D Transform Methods
- Common Transformation Properties
Трехмерный сдвиг элементов
Следующая функция — translate3d() позволяет нам задать трехмерное преобразование путем сдвига элемента, используя координаты трёх осей (X,Y и Z). Перейдем к примеру:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Трехмерный сдвиг элементов</title>
<style>
.static {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
margin: 10px; /* внешние отступы со всех сторон */
background: gray; /* цвет заднего фона */
}
div {
width: 180px; /* ширина элемента */
height: 100px; /* высота элемента */
line-height: 100px; /* высота строки (выраывниваем по вертикали) */
text-align: center; /* горизонтальное выравнивание текста по центру */
transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */
}
.test2, .test4, .test6 {background: orange;} /* цвет заднего фона */
.test, .test3, .test5 {background: plum;} /* цвет заднего фона */
.test:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,20px,20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test2:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test3:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test4:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,0,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test5:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,0, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test6:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,20px, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
</style>
</head>
<body>
<div class = "static"><div class = "test">translate3d(20px,20px,20px)*</div></div>
<div class = "static"><div class = "test2">translate3d(-20px,-20px,-20px)*</div></div>
<div class = "static"><div class = "test3">translate3d(-20px,-20px,-80px)*</div></div><br>
<div class = "static"><div class = "test4">translate3d(0,0,-80px)*</div></div>
<div class = "static"><div class = "test5">translate3d(20px,0, 40px)*</div></div>
<div class = "static"><div class = "test6">translate3d(0,20px, 40px)*</div></div>
</body>
</html>
По аналогии с ранее рассмотренными функциями сдвига элементов, функция translate3d() задаёт сдвиг одновременно по осям X,Y и Z. Первое значение функции определяет горизонтальный сдвиг элемента (положительное значение сдвигает элемент вправо по оси X, а отрицательное влево по оси X). Второе значение функции определяет вертикальный сдвиг элемента (положительное значение сдвигает элемент вниз по оси Y, а отрицательное вверх по оси Y). Третее значение функции определяет сдвиг по оси Z (отрицательное значение отдаляет элемент). Если указать значение 0 для любой оси, то элемент не будет по ней сдвигаться, по аналогии с другими функциями.
Результат нашего примера:
Рис. 183 Пример трехмерного сдвига элементов (функция преобразования элемента translate3d).
Функция perspective()
Кроме всего прочего, в CSS3 была добавлена еще одна функция — , которая может быть использована для создания эффекта перспективы, глубины в сцене. Перемещая элемент по оси Z с установленной перспективой, можно наблюдать, как он приближается или отдаляется от зрителя.
Итак, данная функция задает расстояние между плоскостью экрана и точкой сходимости линий. Масштабирование элемента пропорционально d/(d – Z), где d (значение перспективы) — это расстояние от графической плоскости до предполагаемого положения глаз зрителя:
На схеме показано, как масштабирование зависит от перспективы и значения Z. На верхнем рисунке Z составляет половину d. Для того, чтобы создать впечатление, что исходный круг (который нарисован сплошным контуром) стал ближе к зрителю (круг, нарисованный пунктиром), круг увеличивается в два раза (результат показан в качестве голубого круга). На нижнем рисунке круг уменьшен на одну треть, чтобы создать впечатление, что он отдалился от исходного положения и зрителя.
Без указания перспективы все точки в Z-пространстве сплюснуты в 2D-плоскости, и восприятие глубины будет отсутствовать как таковое. Для некоторых трансформаций, таких как перемещение (translate) по оси Z, функция перспективы играет важную роль, поскольку делает возможным передать визуальный эффект 3D-трансформации.
Ниже показаны примеры того, как выглядят элементы с перспективой и без:
Perspective-origin — точка отсчета
Для перспективы можно изменить точку отсчета при помощи свойства . Оно словно задает точку расположения зрителя при взгляде на перспективу. По умолчанию эта точка находится в центре элемента, но можно определить координаты точки по осям X и Y, из которой наблюдатель будет смотреть на дочерние элементы:
Property Values
| Value | Description |
|---|---|
| none | Defines that there should be no transformation |
| matrix(n, n, n, n, n, n) | Defines a 2D transformation, using a matrix of six values |
| matrix3d(n, n, n, n, etc….) | Defines a 3D transformation, using a 4×4 matrix of 16 values |
| translate(x, y) | Defines a 2D translation |
| translate3d(x, y, z) | Defines a 3D translation |
| translateX(x) | Defines a translation, using only the value for the X-axis |
| translateY(y) | Defines a translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale(x, y) | Defines a 2D scale transformation |
| scale3d(x, y, z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| rotate3d(x, y, z, angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| skew(x-angle, y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Какие возможности предоставляют отдельные свойства преобразования?
Чтобы не перечислять все свойства внутри функции , можно указать одно перемещение, одно вращение и одно масштабирование по-отдельности. Заодно это позволит при необходимости изменить только какое-то одно преобразование, не меняя остальные.
На первый взгляд можно было бы ожидать, что элемент будет повернут на 10 градусов (), а затем при наведении курсора добавит к исходному преобразованию масштабирование (). Однако, свойство будет переопределено, поэтому вращение потеряется при наведении курсора. По мере того, как усложняются различные состояния или взаимодействия, может быть тяжело поддерживать все желаемые варианты преобразований.
С отдельными свойствами преобразования можно добавлять или удалять отдельные трансформации, не влияя на остальные. Таким образом, можно немного изменить код и получить желаемый результат, в котором элемент при наведении одновременно поворачивается и масштабируется.
Теперь можно применить или анимацию по отдельности. В этом примере масштабирование и перемещение изменяются при наведении курсора с разной продолжительностью и задержкой. Поворот не выполняется в и не влияет на анимации двух других свойств.
See this code Independent Transform Properties on x.xhtml.ru.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Отображение дочерних элементов в трехмерном пространстве в CSS</title>
<style>
div {
width : 200px; /* устанавливаем ширину блока */
height : 200px; /* устанавливаем высоту блока */
border: 1px solid white; /* устанавливаем сплошную границу размером 1 пиксель белого цвета */
}
.static {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
background: silver; /* устанавливаем цвет заднего фона */
margin : 50px; /* устанавливаем величину внешнего отступа для всех сторон элемента */
-webkit-perspective: 500px; /* для поддержки ранних версий браузеров */
-moz-perspective: 500px; /* для поддержки ранних версий браузеров */
perspective: 500px; /* определяет, на сколько пикселей удален трехмерный элемент от точки обзора */
}
@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */
100% {
-moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
transform : rotateY(360deg); /* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
}
}
@keyframes iliketomoveit {
100% {
-moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */
transform : rotateY(360deg);/* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
}
}
.test {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : green; /* устанавливаем цвет заднего фона */
transform-style : flat; /* вложенные (дочерние) элементы отображаются плоскими в двухмерной плоскости(это значение по умолчанию) */
}
.test2 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : orange; /* устанавливаем цвет заднего фона */
}
.test3 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */
background : green; /* устанавливаем цвет заднего фона */
-webkit-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */
-moz-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */
transform-style : preserve-3d; /* вложенные (дочерние) элементы трансформируются в их собственной трёхмерной плоскости */
}
</style>
</head>
<body>
<div class = "static">
<b>transform-style: flat;</b>
<div class = "test">
<div class = "test2">
</div>
</div>
</div>
<div class = "static">
<b>transform-style: preserve-3d;</b>
<div class = "test3">
<div class = "test2">
</div>
</div>
</div>
</body>
</html>
Пример использования CSS свойства transform-style(отображение дочерних элементов в трехмерном пространстве).CSS свойства
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-трансформации элементов
Поддержка браузерами
1. Функции 2D-трансформации transform
Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.
Допустимые значения:
matrix() — любое числоtranslate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %scale(), scaleX(), scaleY() — любое числоrotate() — угол (deg, grad, rad или turn)skew(), skewX(), skewY() — угол (deg, grad, rad)
| Функция | Описание |
|---|---|
| none | Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов. |
| matrix(a, c, b, d, x, y) | Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх. |
| translate(x,y) | Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения. |
| translateX(n) | Сдвигает элемент относительно его обычного положения по оси X. |
| translateY(n) | Сдвигает элемент относительно его обычного положения по оси Y. |
| scale(x,y) | Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально. |
| scaleX(n) | Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали. |
| scaleY(n) | Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали. |
| rotate(угол) | Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота. |
| skew(x-угол,y-угол) | Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически. |
| skewX(угол) | Деформирует стороны элемента относительно оси X. |
| skewY(угол) | Деформирует стороны элемента относительно оси Y. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.
2. Точка трансформации transform-origin
Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.
| transform-origin | |
|---|---|
| Значения: | |
| ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %) |
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
3. Множественные трансформации
Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.
div {transform: scale(1.5) rotate(-10deg);}
CSS3-переходы
CSS3-анимация
Функции двухмерной трансформации transform
Свойство представляет собой набор опций, среди которых доступны разные функции трансформирования. Является не наследуемым. Разберем его подробнее:
| transform | |
|---|---|
| Значения: | |
| Служит для отмены какого-либо трансформирования элемента. Является опцией, которая устанавливается по умолчанию. | |
| Данное матричное преобразование представляет собой синергию (сочетание) нескольких функций трансформирования. Доступные параметры трансформирования: вращение, изменение масштаба, изменение угла наклона и местоположения контейнера. Параметр предназначен для масштабирования html-блока по горизонтальной декартовой линии координат. При происходит уменьшение, а при происходит увеличение по ширине. Параметр применяется для деформации хтмл-контейнера по вертикали. Значение применяется для деформации хтмл-контейнера по горизонтали. Переменная предназначена для масштабирования html-блока по вертикальной декартовой линии координат. При происходит уменьшение, а при происходит увеличение по ширине. Переменная в матрице задает смещение по X-ой координате. . Переменная в матрице задает смещение Y-ой координате. . |
|
| Предназначена для смещения хтмл-блока по горизонтальной и вертикальной воображаемым осям одновременно. Входные переменные могут иметь как отрицательное, так и положительное значение. Следует отметить, что эта функция влияет только на визуальное смещение элемента, его фактическое местоположение остается тем же. То есть иными словами — сдвиг не оказывает влияние на местоположение других блоков. | |
| Предназначена для смещения html-блока по горизонтальной линии декартова пространства на n единиц, которые могут как в отрицательную, так и положительную стороны. | |
| Предназначена для смещения html-блока по вертикальной линии декартова пространства на n единиц, которые могут быть отрицательными и положительными. | |
| Предназначена для масштабирования элемента одновременно в двух направлениях (по ширине и высоте): x — по воображаемой горизонтальной линии, y — по воображаемой вертикальной. Оба входных значения могут быть минусовыми и плюсовыми. При минусовых величинах формируется зеркальное отображение. При 0 < x < 1 объект уменьшается, а при x > 1 увеличивается по ширине. Для y аналогично, но по высоте. | |
| Применяется для масштабирования (сужения, растяжения по ширине) текущего html-контейнера вдоль воображаемой горизонтальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по ширине. При n = 1 хтмл-объект будет иметь реальную ширину без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение. | |
| Применяется для масштабирования (сужения, растяжения по высоте) текущего html-контейнера вдоль воображаемой вертикальной оси декартова пространства. При 0 < n < 1 объект уменьшается, а при n > 1 увеличивается по высоте. При n = 1 хтмл-объект будет иметь реальную высоту без изменений. n может быть как положительным, так и отрицательным. При минусовых величинах объект принимает зеркальное отображение. | |
| Применяется для поворота объекта на n-ое число градусов (некоторый угол). n может быть как положительным (вращение по ходу стрелки часов), так и отрицательным (вращение против хода стрелки часов). Одно полное вращение элемента равно 360 градусов. Формат записи угла: число и deg, grad, rad или turn. | |
| Предназначено для деформарования хтмл-элемента по x-ой и y-ой осям пространства, то есть в ширину и высоту одновременно. Формат значения: число и deg, grad или rad. | |
| Предназначена для деформации хтмл-контейнера по воображаемой горизонтальной оси. | |
| Используется для деформации хтмл-контейнера по воображаемой вертикальной оси. | |
| Будет установлено в первоначальное значение. | |
| Унаследовать правило от родителя. |
Формат записи
Scaling (Resizing)
Scales an element up or down on the 2D plane.
The CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales.
This scaling transformation is characterized by a two-dimensional vector. Its coordinates define how much scaling is done in each direction. If both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation).
When a coordinate value is outside the range, the element grows along that dimension; when inside, it shrinks. If it is negative, the result a point reflection in that dimension. A value of 1 has no effect.
The function is specified with either one or two values, which represent the amount of scaling to be applied in each direction.
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Scales an element up or down horizontally.
The CSS function defines a transformation that resizes an element along the x-axis (horizontally).
It modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleX(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the property).
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX
Scales an element up or down vertically.
The CSS function defines a transformation that resizes an element along the y-axis (vertically).
It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property).
— More Info : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY
The rotateZ() Method
The method rotates an element around its Z-axis at a given degree:
Example
#myDiv
{
transform: rotateZ(90deg);
}
CSS Transform Properties
The following table lists all the 3D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
CSS 3D Transform Methods
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4×4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
❮ Previous
Next ❯
Common Transformation Properties
One way to transform an object is to declare the appropriate Transform type and apply it to the transformation property of the object. Different types of objects have different types of transformation properties. The following table lists several commonly used Windows Presentation Foundation (WPF) types and their transformation properties.
| Type | Transformation properties |
|---|---|
| Brush | Transform, RelativeTransform |
| ContainerVisual | Transform |
| DrawingGroup | Transform |
| FrameworkElement | RenderTransform, LayoutTransform |
| Geometry | Transform |
| TextEffect | Transform |
| UIElement | RenderTransform |
