Клавиша / esc

transform-box

Определяет область элемента к которой применяются свойства трансформации.

Время чтения: меньше 5 мин

Кратко

Скопировано

Свойство transform-box определяет область элемента к которой применяются трансформации.

Пример

Скопировано
        
          
          .element {  transform-box: fill-box;  transform-origin: 50% 50%;  transform: perspective(17px);}
          .element {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: perspective(17px);
}

        
        
          
        
      

Как понять

Скопировано

Чаще всего transform-box используется при работе с векторными изображениями и анимациями.

Если указать значение fill-box, то transform-origin будет отсчитывать значение от центра векторного объекта, а не от центра всего SVG-холста. Наглядно это можно увидеть в анимации вращения.

Открыть демо в новой вкладке

Как пишется

Скопировано

Разные значения transform-box заставляют transform и transform-origin работать по-другому. Свойство не наследуется на дочерние объекты.

Может принимать значения:

  • content-box;
  • border-box;
  • fill-box;
  • stroke-box;
  • view-box — значение по умолчанию.