我使用CSS3尺度变换缩放包含内部其他的div一个div。

我的问题是，一些内部的div我需要保持，因为他们，基本上就好像他们不是按比例的，它们的大小应该不会改变，但我确实需要扩展里面一切父DIV。

你怎么能扭转一些的div的比例？
我想申请一个逆伸缩。
如果整体的div已申请的1.5的值，我试图找到什么样的价值我现在要扩展其他的div直观地回复他们，他们之前的样子。

Answer 1:

如果父DIV已经被倍缩放1.5 ，那么你需要的因数来缩放孩子1/1.5 = 0.(6)以保持它们的大小不变。

例

在一般情况下，为了取消一个子元素尺度变换已应用在家长和具有的比例因子a ，您需要申请另一尺度变换系数的1/a对孩子本身。

你要么需要：

你做任何事情之前手动计算比例系数，然后用它，因为它是在你的代码（例如上面链接）
使用预处理程序来处理这件事情（ SASS例子 ）
使用JavaScript来计算所需孩子的比例系数，并设定比例transform的孩子

Answer 2:

任何规模操作的逆操作是1 / <scale>这样由通过缩放容器1.5则需要通过按比例绘制的儿童1 / 1.5 = 0.6

不幸的是，根据你不能只使用CSS类的规范：

transform: scale(1/1.5);

由于规模被定义为scale(<number>[, <number>])

其中<number>是

任一种或零个或多个十进制数字后跟一个句点（。），随后一个或多个十进制数字

所以你必须给自己做计算或可以使用这样一个动态样式表语言LESS支持这些类的操作。

演示（仅适用于WebKit的）

Answer 3:

你可以使用一个CSS变量来存储您的比例系数，然后用calc()来计算逆规模对于具有某一类的子元素：

 .wrapper { transform: scale(var(--scale)); background: #ddd; } .wrapper > * { text-align: center; } .wrapper > .revertscale { transform: scale(calc(1/var(--scale))); }

 <div class="wrapper" style="--scale: 0.8"> <h2>scaled title</h2> <p>scaled description</p> </div> <div class="wrapper" style="--scale: 0.8"> <h2 class="revertscale">not scaled title</h2> <p class="revertscale">not scaled description</p> </div>

⋅⋅⋅

如果你不希望任何一个子元素的规模，这样做将是你的风格作为包装的伪元素的另一种方式：

 .wrapper { position: relative; } .wrapper > * { text-align: center; } .wrapper::before { content: ""; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scale(var(--scale)); background: #ddd; }

 <div class="wrapper" style="--scale: 1"> <h2>title</h2> <p>description</p> </div> <div class="wrapper" style="--scale: 1.2"> <h2>title</h2> <p>description</p> </div> <div class="wrapper" style="--scale: 0.8"> <h2>title</h2> <p>description</p> </div>