transform-box

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

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

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

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

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

Как пишется

Секция статьи "Как пишется"
        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
        
      
        
          
          .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 заставляют transform и transform-origin работать по-другому. Свойство не наследуется на дочерние объекты.

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

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