Свойство CSS `transform-box`

Свойство transform-box CSS определяет блок макета, относительно которого задаются свойства transform, отдельные свойства трансформации translate, scale и rotate, а также свойство transform-origin.

Синтаксис

/* Keyword values */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

/* Global values */
transform-box: inherit;
transform-box: initial;
transform-box: revert;
transform-box: revert-layer;
transform-box: unset;

Значением свойства transform-box служит одно из перечисленных ниже ключевых слов.

Значения

content-box

В качестве опорного блока используется блок содержимого. Опорным блоком для <table> является рамка его блока-обёртки таблицы, а не блок самой таблицы.

border-box

В качестве опорного блока используется рамка. Опорным блоком для <table> является рамка его блока-обёртки таблицы, а не блок самой таблицы.

fill-box

В качестве опорного блока используется ограничивающая рамка объекта. Для элементов, связанных с блоком макета CSS, действует как content-box.

stroke-box

В качестве опорного блока используется ограничивающая рамка обводки. Для элементов, связанных с блоком макета CSS, действует как border-box.

view-box

В качестве опорного блока используется ближайшая область просмотра SVG. Если для элемента SVG, создающего область просмотра, задан атрибут viewBox, опорный блок располагается в начале системы координат, заданной атрибутом viewBox, а его размеры задаются значениями ширины и высоты атрибута viewBox. Для элементов, связанных с блоком макета CSS, действует как border-box.

Формальное определение

Формальный синтаксис

transform-box = 
  content-box |
  border-box |
  fill-box |
  stroke-box |
  view-box

Примеры

Область действия transform-origin в SVG

В этом примере у нас есть SVG:

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g>
    <circle id="center" fill="red" r="1" transform="translate(25 25)" />
    <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" />
    <rect
      id="box"
      x="10"
      y="10"
      width="10"
      height="10"
      rx="1"
      ry="1"
      stroke="black"
      fill="none" />
  </g>
</svg>

В CSS задана анимация, использующая трансформацию для бесконечного вращения прямоугольника. transform-box: fill-box используется, чтобы поместить transform-origin в центр ограничивающей рамки, благодаря чему прямоугольник вращается на месте. Без этого точкой начала трансформации был бы центр холста SVG, и эффект получился бы совершенно другим.

svg {
  width: 80vh;
  border: 1px solid #d9d9d9;
  position: absolute;
  margin: auto;
  inset: 0;
}

#box {
  transform-origin: 50% 50%; /* anything other than `0 0` to see the effect */
  transform-box: fill-box;
  animation: rotate-box 3s linear infinite;
}

@keyframes rotate-box {
  to {
    transform: rotate(360deg);
  }
}

Спецификации

Совместимость с браузерами

См. также

• Использование трансформаций CSS
• transform, transform-origin
• Отдельные свойства трансформации:
  • translate
  • scale
  • rotate