CSS 变换缩放，不缩放子元素答案

【问题标题】：CSS Transform scale, don't scale child elementCSS 变换缩放，不缩放子元素
【发布时间】：2015-01-19 00:32:48
【问题描述】：

如果我有一个带有几个子元素的 div 并且它正在被 css 转换缩放。我有一个不想缩放的子元素

#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。

【问题讨论】：

这是不可能的，缩放会影响元素及其所有内容。您唯一能做的就是将孩子“向后”缩放适当的因子。
你能改变父级的宽度而不是缩放吗？

标签： css transform

【解决方案1】：

很遗憾，这是不可能的。

不过，您大致还有两个选择：

缩放所有其他元素，不包括您不想缩放的元素（但这不会缩放容器）。
缩放容器并重新缩放您不想缩放的元素（但这可能会使它看起来模糊）。

例子：

// 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);
}

【讨论】：

【解决方案2】：

恐怕您需要使用更详细的选择器，例如#parent > span:not(:last-child)。 Example.

【讨论】：

【解决方案3】：

我为 Chrome 找到了 hack 来解决模糊问题。

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

【讨论】：