CSS Transform Scale, Don't Scale Child Element

CSS Transform scale, don't scale child element

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

CSS Scale transform on child not affecting parent size

I missed a crucial part of CSS transforms: they do not affect Document flow, only the visual representation. Thus the original footprint of the element would remain. I was able to overcome by setting widths on the child and sibling, then manually shifting the sibling over to match the top corner of the child. More work would be needed for it to adjust to small screens.

.parent {

  background-color: green;

}

.parent .child-object {

  width: 10em;

  background-color: red;

}

.sibling {

  color: white;

  width: 20em;

  background-color: blue;

}

.SHRINK-ME {

  transform: scale(.80);

}

.TRANSLATE-ME {

  transform: translate(-5%, 10%);

}

<div class='row'>

  <div class='parent SHRINK-ME'>

    <div class='child-object '>CHILD</div>

  </div>

  <div class='sibling TRANSLATE-ME'>SIBLING</div>

</div>

How do I prevent child affected for transform scale in css3?

Instead of transform: scaleX try changing the width

.wrapper:hover .parent {
    opacity: 1;
    width: 100%;
}

http://jsfiddle.net/cdmkoao4/3/

Update:

Honestly, I don't see any reason why would you use scaleX instead of width, but this is the only solution that I came up with. Simply don't nest .child with .parent, make them separate divs with position: absolute. On hover, you'd scaleX only .parent, while you'd only change the opacity of .child (I still used same classes even though they don't have parent-child status anymore).

http://jsfiddle.net/cdmkoao4/9/

You'd need to play a bit with transition-delay time to get the exact effect you want.

How to use CSS transform: scale(); to fit child div to parent div responsively in react?

Using @Gershom's snippet, but keeping aspect ratio

let scaledWrapper = document.getElementsByClassName('scaled-wrapper')[0];

let applyScaling = scaledWrapper => {

  

  // Get the scaled content, and reset its scaling for an instant

  let scaledContent = scaledWrapper.getElementsByClassName('scaled-content')[0];

  scaledContent.style.transform = 'scale(1, 1)';

  

  let { width: cw, height: ch } = scaledContent.getBoundingClientRect();

  let { width: ww, height: wh } = scaledWrapper.getBoundingClientRect();

  

//  let scaleAmtX = ww / cw;

//  let scaleAmtY = wh / ch;

  let scaleAmtX = Math.min(ww / cw, wh / ch);

  let scaleAmtY = scaleAmtX;

  

  

  scaledContent.style.transform = `scale(${scaleAmtX}, ${scaleAmtY})`;

        

};

applyScaling(scaledWrapper);

// ---- The rest of the code is just for the demonstration ui ----

let change = () => {

  let w = parseInt(wInp.value);

  let h = parseInt(hInp.value);

  if (!isNaN(w)) scaledWrapper.style.width = `${w}px`;

  if (!isNaN(h)) scaledWrapper.style.height = `${h}px`;

  scaledWrapper.getElementsByClassName('scaled-content')[0].innerHTML = textInp.value;

  applyScaling(scaledWrapper);

};

let wInp = document.createElement('input');

wInp.setAttribute('placeholder', 'input parent width in px');

wInp.addEventListener('input', change);

wInp.value = '100';

document.body.appendChild(wInp);

let hInp = document.createElement('input');

hInp.setAttribute('placeholder', 'input parent height in px');

hInp.addEventListener('input', change);

hInp.value = '100';

document.body.appendChild(hInp);

let textInp = document.createElement('input');

textInp.setAttribute('placeholder', 'input text content');

textInp.addEventListener('input', change);

textInp.value = 'abc';

document.body.appendChild(textInp);

.wrapper-wrapper {

  box-sizing: border-box;

  border: solid 2px blue;

  position: relative;

}

.scaled-wrapper {

  position: relative;

  width: 100px; height: 100px;

  outline: 1px solid red;

  z-index: 1;

}

.scaled-content {

  box-sizing: border-box;

  display: inline-block;

  transform-origin: 0 0;

  background-color: #ffd0d0;

  z-index: -1;

}

<div class="wrapper-wrapper">

  <div class="scaled-wrapper">

    <div class="scaled-content">abc</div>

  </div>

</div>

Scale a div without changing the size and position of its child elements

You can't prevent the child elements to be scaled if you apply the transform on your wrapper.

⋅
⋅
⋅

But you can use a CSS variable to store your scale factor, and then use calc to calculate (better than doing it manually) and apply the inverse scale for the child elements:

.wrapper {

  padding: 0 20px;

  transform: scale(var(--scale));

  background: #ddd;

}

.wrapper > * {

  transform: scale(calc(1/var(--scale)));

}

<div class="wrapper" style="--scale: 1">

  <h2>title</h2>

  <p>description</p>

</div>

<div class="wrapper" style="--scale: 1.2">

  <h2>title</h2>

  <p>description</p>

</div>

<div class="wrapper" style="--scale: 0.8">

  <h2>title</h2>

  <p>description</p>

</div>

---

Related Topics