CSS转换比例,不缩放子元素 [英] CSS Transform scale, don't scale child element
本文介绍了CSS转换比例,不缩放子元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我有一个带有几个子元素的div,并且它正在进行css转换缩放.我有一个不想缩放的子元素
If I have a div with a few child elements and it's being css transform scaled. I've got one child element which I don't want to scale
#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.
Can this be done with css only? Without changing the html or using js.
推荐答案
不幸的是,这不可能.
您大概还有两个选择:
- 缩放所有其他元素,不包括您不想缩放的元素(但这不会缩放容器).
- 缩放容器并重新缩放您不想缩放的元素(但这可能会使它看起来模糊).
示例:
// 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);
}
这篇关于CSS转换比例,不缩放子元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文