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

相关标签:

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

Answer 2

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

Answer 3

I found hack for Chrome to solve problem with blurred.

#parent { transform: scale(5);}
#child  { transform: scale(0.2)  translate3d( 0, 0, 0);}