CSS Transform scale, don't scale child element

css transform
Matt Coady picture Matt Coady · Nov 21, 2014 · Viewed 34.8k times · Source

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

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

Answer

Reinier Kaper picture Reinier Kaper · Nov 21, 2014

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

Related questions

CSS3 Continuous Rotate Animation (Just like a loading sundial)

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has …

Read More
Blurry text after using CSS transform: scale(); in Chrome

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } If you visit http://…

Read More
Rotate and translate

I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if i disable the positioning. CSS: #rotatedtext { transform-origin: left; transform: rotate(90deg); transform: translate(50%, 50%); } The html is …

Read More