31

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.

Weafs.py
  • 22,731
  • 9
  • 56
  • 78
Matt Coady
  • 3,418
  • 5
  • 38
  • 63

3 Answers3

16

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);
}
Reinier Kaper
  • 1,079
  • 1
  • 8
  • 17
  • I can attest re: #2 that this will definitely make it look blurry. I need to do something similar for a PDF viewer. Without using scaling the main scrolling eleemnt will get too large with long documents, but I want to render the viewport to the actual screen pixels without regard to scaling. I was thinking of using an absolutely positioned element above the scaled one but this presents other issues. – Emperor Eto Oct 08 '22 at 16:17
4

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

sgromskiy
  • 300
  • 1
  • 4
1

I found hack for Chrome to solve problem with blurred.

#parent { transform: scale(5);}
#child  { transform: scale(0.2)  translate3d( 0, 0, 0);}
Aikon Mogwai
  • 4,954
  • 2
  • 18
  • 31