Scale parent element but remove scaling on child elements

Question

I'm currently working on some css animation using scale. Is there a way to restrict child elements not to scale and only the parent element will scale.

.scale {
    max-width : 200px;
    height : 200px;
    background-color : beige;
    -webkit-transition: transform 0.3s linear;
    -webkit-transform-origin : top left;
}

.scale:hover {
    -webkit-transform : scale(2.0);
    -webkit-transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale {
    -webkit-transform : scale(1.0);
}

<div class="scale">
    <div class="dont-scale">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>    
    </div>

</div>

Possible duplicate of [CSS Transform scale, don't scale child element](https://stackoverflow.com/questions/27051600/css-transform-scale-dont-scale-child-element) — Obsidian Age, Jun 19 '17 at 03:28
Why are you using prefixes? [Transition](http://caniuse.com/#feat=css-transitions) & [2D Transform](http://caniuse.com/#feat=transforms2d) have very good support across browsers. Prefixes are not needed in this case. — I haz kode, Jun 19 '17 at 04:07

Ehsan · Answer 1 · 2017-06-19T04:26:37.883

.scale:hover .dont-scale {} run after .scale:hover {},so scale(1) Measure than scale(2) ,for this reason child will be scaled same parent.

Try This :

.scale:hover .dont-scale{
    -webkit-transform : scale(0.5);
    transform : scale(0.5);
}

To avoid margins issue:

.dont-scale{
   -webkit-transform-origin : top left;
   -webkit-transition: transform 0.3s linear;
}

.scale {
  max-width : 200px;
  height : 200px;
  background-color : beige;
  -webkit-transition: transform 0.3s linear;
  -webkit-transform-origin : top left;
  transition: transform 0.3s linear;
  transform-origin : top left;
}

.dont-scale{
  -webkit-transform-origin : top left;
  -webkit-transition: transform 0.3s linear;
  transform-origin : top left;
  transition: transform 0.3s linear;
}

.scale:hover {
  -webkit-transform : scale(2.0);
  -webkit-transition: transform 0.3s linear;
  transform : scale(2.0);
  transition: transform 0.3s linear;
 }
 
.scale:hover .dont-scale{
  -webkit-transform : scale(0.5);
  transform : scale(0.5);
}

<div class="scale">
  <div class="dont-scale">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>    
  </div>
</div>

I tried that before, but it seems to be having some imaginary margins. Take a look at my fiddle https://jsfiddle.net/clestcruz/Lg32f3sa/ — clestcruz, Jun 19 '17 at 03:39
To avoid margins issue, add this css, .dont-scale{ -webkit-transform-origin : top left;-webkit-transition: transform 0.3s linear;} — Shyam, Jun 19 '17 at 03:48

Scale parent element but remove scaling on child elements

1 Answers1

Linked