CSS变换比例,不要缩放子元素

Question

如果我有一个带有一些子元素的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.

Answer 1

不幸的是,这是不可能的.

你大致还有两个选择:

1. 缩放所有其他元素,不包括您不想缩放的元素(但这不会缩放容器).
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);
}