CSS Свойства
align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы
CSS Свойства
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
caption-side
caret-color
@charset
clear
clip
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-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
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
@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
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
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
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
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
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Свойство transform-style | Справочник CSS
Определение и применение
CSS свойство transform-style определяет как вложенные (дочерние) элементы в трехмерном пространстве.
По умолчанию все дочерние элементы плоскими в двухмерной плоскости, чтобы вложенным (дочерним) элементом трансформироваться в их собственной трёхмерной плоскости необходимо использовать значение preserve-3d свойства transform-style.
Совместно со своимством transform-style используется свойство transform, которое применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента).
Поддержка браузерами
Internet Explorer не поддерживает значение свойства preserve-3d.
CSS синтаксис:
стиль преобразования: "плоский | сохранить-3d | начальный | наследование";
Синтаксис JavaScript:
object.style.transformStyle = "preserve-3d"
Значения свойства
| Значение | Описание |
|---|---|
| плоский | Вложенные (дочерние) элементы плоскими в двухмерной плоскости (находятся в плоскости самого элемента). Это значение по умолчанию. |
| preserve-3d | Вложенные (дочерние) элементы трансформируются в их собственной трёхмерной плоскости. |
| начальный | Устанавливает свойство в значение по умолчанию. |
| наследуется | Указывает, что значение наследуется от родительского элемента. |
Свойство text-transform | CSS справочник
Поддержка браузерами
CSS синтаксис:
text-transform:"none | capitalize | uppercase | lowercase | initial | inherit";
JavaScript синтаксис:
object.style.textTransform = "capitalize"
Значения свойства
| Значение | Описание |
|---|---|
| none | Текст отображается как есть (регистр букв не изменяется). Это значение по умолчанию. |
| capitalize | Преобразует первые символы каждого слова в верхний регистр. |
| uppercase | Преобразует все символы в верхний регистр. |
| lowercase | Преобразует все символы в нижний регистр. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Свойство text-transform.</title>
<style>
.test {
text-transform : capitalize; /* преобразуем первые символы каждого слова в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test2 {
text-transform : uppercase; /* преобразуем все символы в верхний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
.test3 {
text-transform : lowercase; /* преобразуем все символы в нижний регистр */
width : 500px; /* задаём ширину текстового блока. */
}
</style>
</head>
<body>
<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
</body>
</html>
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 нельзя использовать проценты и ключевые слова.
transform:rotate(x) — вращение объекта
Чтобы вращать элемент существует команда rotate(x). Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg
Пример #1. Вращение объекта в html через трансформацию
На странице преобразуется в следующее
Примечание
Свойства:
Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.
Пример #2. Вращение объекта в html при наведении курсора
Создадим класс kvadrat2 и пропишем для него псевдокласс :hover, в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).
На странице преобразуется в следующее
Но это вращение происходит резко и не смотрится «эффектно». Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.
Пример #3. Плавное вращение при наведении курсора (анимация) в html
Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition. Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear
На странице преобразуется в следующее
Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.
Функции transform
Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.
Translate
Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.
Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.
Величина смещения может быть задана в любых применяемых в CSS единицах, например px или em. Если задать только один параметр, тогда смещение будет только по горизонтали. Отрицательные значения сдвигают элемент в противоположную сторону.
Также есть две функции для смещения элемента только одной оси X или Y.
Scale
Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – . Если задано одно значение воздействие будет по двум осям сразу.
Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим .
На демонстрации элемент с красным фоном увеличился в 2 раза.
See the Pen
scale by Андрей (@adlibi)
on CodePen.
Для масштабирования по одной оси есть соответствующие функции и .
С помощью них можно зеркально отразить элемент.
- — отразить по горизонтали;
- — отразить по вертикали;
- — одновременно перевернуть изображение по горизонтали и вертикали.
Rotate
Разворачивает элемент на плоскости. Например, повернет объект на 45% по часовой стрелке.
See the Pen
rotate by Андрей (@adlibi)
on CodePen.
Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:
deg обозначает градус поворота.
Scew
Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.
На примере ниже к синему квадрату применено (наклон только по горизонтали), а к красному функция (наклон по обоим осям).
See the Pen
skew by Андрей (@adlibi)
on CodePen.
Примечание: при некоторых значениях углов элемент может исчезать.
Matrix
Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.
Например через следующие две функции
будут записаны как:
Не очень удобно для человеческого восприятия, поэтому непонятно, кто будет этим пользоваться.
Transform • Про CSS
Спецификация: www.w3.org/TR/css3-transforms/.
Используя свойство можно задавать элементу одну и более функций для трансформации.
Все функции можно найти тут: Transform Functions
Возможные значения: или функции трансформаций через пробел.
Примеры трансформаций:
Важно помнить, что функции применяются в той последовательности, в какой записаны, и предыдущие функции могут влиять на следующие.
То есть строчки
и
дадут совершенно разный результат, а строчка:
повернет объект на 90 градусов, потому что обе функции будут выполнены последовательно.
Transform-origin
Исходное значение: — центр элемента.
Координаты отсчитываются от верхнего левого угла элемента.
Если задано только одно значение, второе принимает значение .
Если задано два значения, третье принимает значение 0.
Transform-style
Возможные значения:
— трансформируемый элемент плоский
— трансформируемый элемент имеет внутренний объем
Следующие свойства могут перекрывать действие и делать отображение элемента плоским независимо от значения :
с любым значением кроме
с любым значением кроме (блокирует трехмерность, если задан обертке трансформируемого объекта, то есть уровнем выше, чем . На одном уровне они не мешают друг другу) так было на момент написания статьи, сейчас прозрачность делает трёхмерный элемент плоским.
с любым значением кроме
Backface-visibility
Возможные значения:
— объект виден всегда, вне зависимости от того, какой стороной повернут (значение по умолчанию).
— скрывать объект, если он повернут «спиной».
— CSS | MDN
CSS-свойство позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.
Исходный код этого интерактивного примера хранится в репозитории GitHub.
Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.
Если свойство имеет значение, отличное от , будет создан контекст наложения.В этом случае элемент будет действовать как блок для любых элементов или которые он содержит.
Свойство может быть указано как значение ключевого слова или как одно или более значений .
Значения
- Одна или более применяемых функций CSS-трансформации. Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.
- Указывает, что трансформация не должна действовать.
нет |
где
где
где
где
Если является одним из мультифункциональных значений, оно должно быть указано первым.
Результат
Масштабирование / масштабирование анимации вызвано проблемой для доступности, поскольку они становятся частым триггером для типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, включ для всего сайта.
Кроме того, рассмотрите возможность использования @ media-опции — используйте ее для написания , который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
Узнать больше:
Таблицы BCD загружаются только в браузер
Пять анимаций на чистом CSS — Блог HTML Academy
Знание СSS нужно, чтобы создать удобные интерфейсы и оформлять страницы сайта: стилизовать текст, позиционировать блоки, интерактивные элементы.А ещё c помощью CSS можно создать крутые картинки, логотипы и анимацию. Собрали пять нестандартных вариантов использования языка.
Логотипы браузеров
Нарисуйте свой логотип любимого и добавьте анимацию, чтобы он стал интерактивным и живым. Вот как это можно сделать с помощью CSS.
См. Перо
Браузеры Джордано Арагао (@jordanoaragao)
на CodePen.
Лоадер
Бывает, что нужно подождать, пока информация с сервера загрузится на сайт.
Ожидание можно скрасить анимацию.
См. Перо
Погрузчик на чистом CSS от 0 × 5e0 × 5e (@ 0 × 5e0 × 5e)
на CodePen.
Страница 404
Когда на сайте возникает ошибка, пользователь видит страницу с её кодом. Для хороших сайтов разработчики специальную страницу, стилизуя её.Такой вариант может помочь пользователю чуть меньше расстроиться из-за возникшей ошибки.
См.
Перо
Страница ошибки 404 на чистом CSS от Пеймана (@pjthedj)
на CodePen.
Ноутбук
Просто милый улыбающийся ноутбук для тех, кто хочет потренироваться работать с анимацией на CSS.
См. Перо
Ноутбук на чистом CSS — день 37 #dailycssimages от FireMugen (@firemugen)
на CodePen.
Использование знакомого инструмента для решения нестандартных задач поможет опытным разработчикам лучше запомнить редкие CSS-свойства и их применить для создания сложных интерфейсов.А новички изучить новые свойства языка в игровой форме и улучшить навыки.
Познакомиться с анимацией поближе можно на интерактивном курсе «Динамические эффекты».
css-свойство transform-style
Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном
пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D-трансформациям.
Но если мы попробуем применить к дочерним элементам 3D-трансформации, то результат нас не очень обрадует, т.к.
точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали
(см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного
3D-пространства в CSS предусмотрено ненаследуемое свойство
transform-style, которое применяется к родительскому контейнеру и определяет,
как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство
transform) будут отображаться в 3D-пространстве:
- flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
- preserve-3d – будут трансформироваться в своем собственном 3D-пространстве.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство transform-style</title>
<style>
/* Оформляем самый внешний div */
.div_out{
width: 600px;
height: 550px;
margin: auto;
padding: 20px;
background-color: #DFDFDF;
border-radius: 5px;
}
/* Оформляем родительские div'ы абзацев */
.parent_p{
width: 400px;
height: 200px;
margin: auto;
margin-top: 20px;
padding: 20px;
background-color: #F3F3F3;
border-radius: 5px;
transform: perspective(200px) rotateX(0.3rad);
}
/* Оформляем возможность самостоятельной
трансформации дочернего абзаца */
.three_d{
transform-style: preserve-3d;
}
/* Это общий стиль абзацев */
p{
width: 320px;
height: 150px;
margin: auto;
padding: 20px;
background-color: #55aa55;
border-radius: 5px;
text-align: center;
font-weight: bold;
color: #F9F9F9;
transform: rotateX(-150deg);
}
</style>
</head>
<body>
<div class="div_out">
<div class="parent_p">
<p>
Этот абзац трансформируется в <br>
2D-пространстве своего родителя: <br>
transform-style: flat (по умолчанию)
</p>
</div>
<div class="parent_p three_d">
<p>
Этот абзац трансформируется в <br>
собственном 3D-пространстве: <br>
transform-style: preserve-3d
</p>
</div>
</div>
</body>
</html>
Пример №13. Пример использования css-свойства transform-style
Итак, в примере выше у нас имеется обычный общий «div» (темно-серый фон), в котором расположены два
других «div», которые подвергаются идентичной трансформации поворота вокруг оси
X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему
абзацу, которые мы также пытаемся подвергнуть дополнительной 3D-трансформации поворота вокруг оси
X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что
абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то
2D-трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского
элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D-пространство при
помощи класса three_d.
Обязательно поэкспериментируйте с данным примером, попробовав, например, применить к абзацам трансформацию поворота вокруг оси
Z (разницы видно не будет, т.к. такая трансформация будет происходить в плоскости родительского элемента).
Когда применяются свойства offset?
Три новых независимых свойства преобразования применяются до свойств . Функции применяются после .
- (distance, anchor, rotate …)
- (здесь можете устанавливать свой порядок)
Так, например, использование базовой анимации вернёт различный визуальный результат, если объединить ее с или .
See this code transform:translate vs translate with offset-path on x.xhtml.ru.
Довольно интересно (и часто сбивает с толку) то, как все они взаимодействуют друг с другом. Однако знание последовательности преобразований — это уже половина решения в прояснении магии, происходящей с , отдельными свойствами преобразования и траекторией движения.
