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

CSS Transform scale, don't scale child element

提问by Matt Coady

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

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

Can this be done with css only? Without changing the html or using js.

这只能用css完成吗？无需更改 html 或使用 js。

采纳答案by Reinier Kaper

Unfortunately this is not possible.

不幸的是，这是不可能的。

You roughly have two other options though:

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

1. Scale all the other elements, excluding the one you don't want to scale (but this won't scale the container).
2. Scale the container and re-scale the element you don't want to scale (but this will probably make it look blurry).

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

Examples:

例子：

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

回答by Daniel Tedesco

All browser solution for a clean output (not blurry), but with a small change of the html

用于干净输出（不模糊）的所有浏览器解决方案，但对 html 进行了少量更改

Another possible solution with cleaner output, but with a small change of the html code, is, to place the element outside of the parent element, which has to be scaled.

另一个具有更清晰输出但对 html 代码进行少量更改的可能解决方案是，将元素放置在必须缩放的父元素之外。

After that set child div to relative. Now set the top value to 0 minus the height of parent and left to 0.

之后将子div设置为相对。现在将 top 值设置为 0 减去 parent 的高度，将 left 设置为 0。

In this way the child elements won't be affected and don't get blurry.

这样子元素不会受到影响，也不会变得模糊。

For me this solution always worked well.

对我来说，这个解决方案总是很有效。

Take a look at this similiar question, but with much simpler example, because of less code: Scale parent element but remove scaling on child elements

看看这个类似的问题，但举一个更简单的例子，因为代码更少：缩放父元素但删除子元素上的缩放

#parent {
  height: 200px; width: 300px;
  background: beige;
  transition: transform 0.3s linear;
  transform-origin: top left;
}

#child {
  /* top value 0 is minus the height of parent*/
  top: -200px; left: 0px;
  position: relative;
  pointer-events: none;
}

.scale {
  transition: transform 0.3s linear;
  transform-origin: top left;
}

#parent:hover {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* affect child elements by hover, too */
#parent:hover + #child > .scale {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* set span to block for transforming */
span {
  display: block;
  padding-bottom: 10px;
}

<div id="parent">
</div>

<div id="child">
  <span class="scale">Child 1</span>
  <span class="scale">Child 2</span>
  <span>Child 3 (Don't Scale Me)</span>
</div>

Code snippet notes

代码片段注释

/* set span to block for transforming */

/* 将跨度设置为块以进行转换 */

How can I use CSS3 transform on a span?

如何在跨度上使用 CSS3 转换？

/* affect child elements by hover, too */

/* 悬停也影响子元素 */

How to affect other elements when a div is hoveredor better What does the “+” (plus sign) CSS selector mean?

当 div 悬停或更好时如何影响其他元素“+”（加号）CSS 选择器是什么意思？

Conclusion

结论

I think there is no other solution to get a clean output, because scale will always affect subelements, but you can do this workaround.

我认为没有其他解决方案可以获得干净的输出，因为比例总是会影响子元素，但您可以执行此解决方法。

This should work with a fixed position of the divs, too.

这也应该适用于 div 的固定位置。

In any way you have to change the html code to get a clean output.

无论如何，您都必须更改 html 代码才能获得干净的输出。

回答by sgromskiy

I'm afraid you need to use a more detailed selector, like this #parent > span:not(:last-child). Example.

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

回答by Aikon Mogwai

I found hackfor Chrome to solve problem with blurred.

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

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