Есть ли способ использовать CSS-преобразование и не влиять на дочерние элементы

Question

Я создал макет , чтобы продемонстрировать свою проблему. Я боюсь, что решение падает в том, что я сделал с первым примером (box1).

Просто не знаю, почему я не могу применить преобразование css к родительскому элементу и избегаю применять его к дочернему элементу или, по крайней мере, переопределить его.

Дайте мне знать, если есть способ получить эффект первого примера, используя свойство transform. Я не хочу, чтобы второе изображение также масштабировалось. Просто родительский div.

---

Примечание

Я пытаюсь использовать это свойство для включения ускорения графического процессора.

Answer 1

Не играл с этим ни в каком другом браузере, кроме хрома.

Но похоже, что скрытый набор переполнения родительского элемента подразумевает изменение размера наследования изображения.

Таким образом, если вы установите автоматическое переполнение для блоков, к которым применяется анимация, это должно исправить наследование изменения размера.

http://jsfiddle.net/gnrlbzik/5Q8EC/ проверяет переполнение, установленное на авто, которое сохраняет размеры изображения в такте.

Answer 2

Чтобы быть семантическим, я не думаю, что вы должны помешать ему преобразовать дочерний элемент, если вы изменяете / масштабируете его контейнер, а не изменяете его размер. Преобразование не просто анимирует ширину, как в примере на блоке 1, оно масштабирует x.

Я полагаю, что этот вопрос о попытке повысить производительность за счет использования функций, использующих графический процессор для обработки анимации. Я полагаю, что это возможно, если рассматривать элементы как изображение, которое затем анимирует графический процессор. Таким образом, вы не можете иметь внутри элемент, который динамически сохраняет свой размер / форму во время анимации. Может быть, есть способ противодействовать анимации путем преобразования элемента, внутри которого вы хотели бы сохранить статичность, но это, вероятно, не будет ни эффективным, ни действенным.

Примечание : Я не очень хорошо разбираюсь в реальных технологиях, которые веб-набор использует для рендеринга этих преобразований. Извините, если мелкие детали рендеринга не совсем точны. Я обновлю это, если кто-нибудь прокомментирует с лучшим описанием того, как работает преобразование.

Answer 3

Я хотел использовать -transform, чтобы получить перк производительности GPU. Я думаю, что я продолжу использовать анимацию ширины: http://jsfiddle.net/Vyaf3/22/, но с применением свойства css3, которое включит ускорение GPU.