CSS变换比例,不缩放子元素(&A;T)

CSS Transform scale, donamp;#39;t scale child element(CSS变换比例,不缩放子元素(A;T))

本文介绍了CSS变换比例,不缩放子元素(&A;T)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

推荐答案

遗憾的是,这是不可能的。

不过,您大致有两个其他选择:

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

这篇关于CSS变换比例,不缩放子元素(&A;T)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS变换比例,不缩放子元素(&A;T)

基础教程推荐