CSS Масштаб преобразования, не масштабируйте дочерний элемент

Question

Если у меня есть div с несколькими дочерними элементами, и это css transform масштабируется. У меня есть один дочерний элемент, который я не хочу, чтобы масштабировать

#parent{ 
 
    -webkit-transform: scale(.5); 
 
} 
 
    
 
span:last-child{ 
 
    -webkit-transform: Something to ignore the parent scale; 
 
}

<div id="parent"> 
 
    <span>Child 1</span> 
 
    <span>Child 2</span> 
 
    <span>Child 3 (Don't Scale Me)</span> 
 
</div>

Может ли это быть сделано только с помощью CSS? Без изменения html или с помощью js.

Answer 1

К сожалению, это невозможно.

Вы примерно две другие варианты, хотя:

1. Scale все остальные элементы, за исключением того, вы не хотите, чтобы масштабировать (но это не будет масштабироваться контейнер).
2. Масштабируйте контейнер и повторно масштабируйте элемент, который вы не хотите масштабировать (но это, вероятно, заставит его выглядеть размытым).

Примеры:

// Example 1. 
span:not(:last-child) { 
    display: inline-block; /* You can't scale inline elements */ 
    transform: scale(2); 
} 

// Example 2. 
#parent{ 
    transform: scale(.5); 
} 

span:last-child{ 
    transform: scale(2); 
} 

Answer 2

Боюсь, вам нужно использовать более подробный селектор, например, #parent > span:not(:last-child). Example.

Answer 3

Существует только одна ошибка WebKit связанных (найден в Chrome 44), который позволяет, что преобразования не установлены правильно. Если вы используете css-перспективу вместе с масштабированием браузера, значение z неверно масштабируется коэффициентом масштабирования браузера. Но эта ошибка очень редка.

Answer 4

Я нашел hack для Chrome, чтобы решить проблему с размытым.

#parent { transform: scale(5);} 
#child { transform: scale(0.2) translate3d(0, 0, 0);}