{getToc} $title={Table of Contents}
Область преобразования: свойство transform-box
Все преобразования, определяемые свойством transform и transform-origin, относятся к положению и размерам опорного блока элемента. Опорный блок элемента это виртуальный прямоугольник вокруг элемента, который формирует систему координат для отрисовки.
В некоторых браузерах опорный блок принимает центр SVG-холста в качестве точки преобразования. Чтобы решить эту проблему, можно задать для элемента transform-box.
Опорный блок добавляет дополнительное смещение к исходной точке, заданной свойством transform-origin.
Свойство не наследуется.
Значения: transform-box
content-box - В качестве опорного блока выступает область содержимого элемента. Для элемента <table> эта область включает также заголовок таблицы и рамку.
border-box - В качестве опорного блока выступает область рамки элемента. Для элемента <table> эта область включает также заголовок таблицы и рамку.
fill-box - В качестве опорного блока выступает ограничивающая рамка, содержащая только геометрическую форму элемента.
stroke-box - В качестве опорного блока выступает ограничивающая рамка, содержащая геометрическую форму и обводку элемента.
view-box - В качестве опорного блока используется область просмотра на SVG-холсте, которая определяет прямоугольную область, в которую отображается содержимое SVG.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.
Синтаксис
- transform-box: content-box;
- transform-box: border-box;
- transform-box: fill-box;
- transform-box: stroke-box;
- transform-box: view-box;
- transform-box: inherit;
- transform-box: initial;
Трансформации на практике: как сделать ленточки