Замена динамической% ширины с помощью scaleX + translateX

Question

В настоящее время я перехожу к свойству width элемента. Я хотел бы заменить это на переходы на scaleX и translateX для лучшей производительности рендеринга.

Я изо всех сил пытаюсь придумать правильное преобразование 1: 1 между двумя понятиями.

Ниже находится коробка, которая содержит две линии. Каждая строка имеет внутри нее полосу. Первый бар создается с использованием width. Второй бар создается с использованием scaleX и translateX. Второй бар выходит из коробки. Он должен быть идентичен бару width для всех возможных значений.

Это подходящий способ решить эту проблему? Если нет, то как мне подойти к нему? Если это так, у меня есть некоторые проблемы:

• Я чувствую, что мне не нужно использовать ширину 1%. Я думал, что могу сказать 1px и масштабировать его, но, возможно, это неправильная идея.
• Непонятно, следует ли использовать ширину 1% и увеличить масштаб, или 100% ширину и уменьшить масштаб. Может быть, они эквивалентны, но ширина полосы контролирует позиционирование translateX

* { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid; 
 
} 
 
.line { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    height: 5px; 
 
    margin: 50px 0; 
 
} 
 
.bar { 
 
    height: 5px; 
 
    background-color: blue; 
 
} 
 
.bar.width { 
 
    width: 66.6%; 
 
} 
 
.bar.scale { 
 
    width: 1%; 
 
    transform: scaleX(66.6) translateX(33%); 
 
}

<div class='box'> 
 
    <div class='line'> 
 
    <div class='bar width'> 
 
    </div> 
 
    </div> 
 
    <div class='line'> 
 
    <div class='bar scale'> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Это проще, чем все это. Вы уже масштабируете элемент до 66%. Теперь все, что вам нужно сделать, это установить начало в крайнее левое положение элемента с помощью transform-origin: 0 50%; и отказаться от правила перевода. Это должно решить проблему.

* { 
 
    box-sizing: border-box; 
 
} 
 
.box { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid; 
 
} 
 
.line { 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    height: 5px; 
 
    margin: 50px 0; 
 
} 
 
.bar { 
 
    height: 5px; 
 
    background-color: blue; 
 
} 
 
.bar.width { 
 
    width: 66.6%; 
 
} 
 
.bar.scale { 
 
    width: 1%; 
 
    transform: scaleX(66.6); 
 
    transform-origin: 0 50%; 
 
}

<div class='box'> 
 
    <div class='line'> 
 
    <div class='bar width'> 
 
    </div> 
 
    </div> 
 
    <div class='line'> 
 
    <div class='bar scale'> 
 
    </div> 
 
    </div> 
 
</div>