CSS Transform scale, don't scale child element

Question

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>

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

Answer 1

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).

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