Воздействовать на другие элементы при применении преобразования CSS: масштаб

У меня есть три div на странице, все плавающие рядом. С помощью метода масштабирования css я масштабирую самый средний div до 0,5. Это хорошо работает.

Единственная проблема заключается в том, что масштабирование div не повлияет на положение других div. Похоже, что масштабированный div все еще имеет невидимый контейнер с исходным масштабом. Желаемый результат заключается в том, что после масштабирования поля остаются прежними.

Я добавил пример: http://jsfiddle.net/yxYdd/3/ (на самом деле самый средний div заполнен множеством других элементов)

Есть ли аккуратный способ, без возни с полями и т. Д., Чтобы масштабирование повлияло на позиционирование других div?


scale html css css-transforms
person Gijs    schedule 23.05.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

К сожалению, именно так работают 2D-преобразования CSS.

Что вам действительно нужно сделать, так это избежать использования преобразований CSS для этого примера, а вместо этого использовать другую, более простую реализацию.

Я сделал это для вас здесь: http://jsfiddle.net/yxYdd/4/

Единственное изменение, которое вам действительно нужно, это:

.scaleDiv{
    width:75px;
}

Который действительно производит эффект, который вы хотели. Разве это не смешно? :)​

person wnajar    schedule 23.05.2012
comment
К сожалению, это не правильное решение для моей проблемы. Как я уже упоминал, в реальной ситуации div заполнен множеством других элементов (с абсолютной шириной, высотой и т. д.). Я думаю, мне придется написать некоторый jquery-код для вычисления переменных позиций других div. @wnajar спасибо за усилия! - person Gijs; 24.05.2012
comment
Ах, да, эти абсолютные элементы ширины и высоты определенно доставят вам проблемы. Если вы не собираетесь масштабировать все эти другие элементы, возникнут проблемы. В общем, рекомендуется избегать абсолютной ширины и высоты, если вы собираетесь масштабировать такие вещи. - person wnajar; 24.05.2012
comment
В любом случае преобразования CSS не будут вашим решением по указанной выше причине, заключающейся в том, что по замыслу они не масштабируют окружающие объекты. - person wnajar; 24.05.2012