Позиционирование и масштабирование в CSS с transform Translate и Scale. Как вычислить позицию элемента?
В общем уже битый час мучаюсь, но не могу понять следующее:
У меня имеется изображение (больше никаких блоков на странице нет, только одно изображения, ничего лишнего), скажем 400x400... Так вот, я перемещаю это изображение с помощью функции css3 translateX задаю, к примеру, 500px и изображение смещается на 500px вправо. Все работает так как и ожидается, но когда применяю масштабирование (scale) то translate ведет себя невообразимым образом, он двигает изображение меньше чем на 500px, если масштаб изображения уменьшается, а если увеличивается, то дальше чем на 500px.
Я слышал, что translate использует какую-то там субпиксельную интерполяцию, но так до конца и не понял.
В общем, каким образом, по какой формуле можно высчитать правильные пиксели? К примеру, если я уменьшил изображение со scale на 50% то как мне сдвинуть это изображение в правую сторону на 500px? По какой формуле? Куда копать? Ребята !!!)
Да, верно, буквально час назад сам пришел к этому))) Все равное меня что-то смущает. Я посмотрел на функционал кроппинга в ВК и там scale идет до translate. Вот все же мне интересно, по какому принципу вычисление происходит!?
Если я не ошибаюсь, операторы в свойстве transform выполняются справа налево, причем некоторые из них влияют на те, что справа.
Пример:
× transform: translateX(100px) scale(3); – сначала увеличили в три раза, потом переместили на 100px
× transform: scale(3) translateX(100px); – сначала переместили на 100 вправо, потом увеличили в 3 раза, но, так как здесь scale влияет на translateX, поэтому конечный translateX тоже увеличивается в 3 раза и будет равен 300px
Простой
Средний
