transform-box

Свойство 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 — значение по умолчанию.