CSS Transform scale, don't scale child element
css, transform
Solution
Unfortunately this is not possible.
You roughly have two other options though:
- Scale all the other elements, excluding the one you don't want to scale (but this won't scale the container).
- 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);
}
Problem
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.