CSS Transform scale, don’t scale child element

by

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

Leave a Comment