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

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

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

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

Примечание

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

9
css css3

3 ответов

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

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

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

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

2

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

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

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

1

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

0