transform-box

/* 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     

В этом примере у нас есть 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;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

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

Полное авторство этого примера принадлежит Pogany; см. данный CodePen для просмотра в живом режиме.

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