What is the best way to avoid font-size scaling when transforming its container?

Question

I am using css transform: scale to animate the entering of a modal. The problem is that the text scale with the <div> that contains it.

How can I avoid?

I want to use scale because it is the suggested way for obtaining smoother animations.

Please provide the relevant parts of your code (html, css, js) and possibly a jsfiddle to illustrate what you are currently doing. Also be more explicit about what you want to achieve. ImAr first glance it wouldn’t make much sense to scale a div but not scale its contents... — jcaron, Dec 03 '17 at 21:05

score 1 · Answer 1 · answered Dec 03 '17 at 18:10

What you can do is transform both the container and text.

The container is scaled up, while the text is scaled down - so it appears to stay the same.

Here is a very basic example:

button:focus + div {
  transform: scale(2);
}

button:focus + div p {
  transform: scale(.5);
}

div {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  background: black;
  color: white;
}

<button>Click to scale box</button>

<div>
  <p>Do not scale this text</p>
</div>

score 0 · Answer 2 · answered Dec 03 '17 at 18:04

0

Without your code, it is hard to give you a working answer.

Basically, you cannot exclude a child element from its parent element being scaled. You can accomplish what you want by separating the two elements.

There is more information here.

answered Dec 03 '17 at 18:04

Malloree Eady

9
6

score 0 · Answer 3 · answered Dec 03 '17 at 18:23

@MalloreeEady answer, I just enhanced the answer from the post. Text that are related from the parent container usually get affected by any transformation. To able to avoid that, you may need to create another tag inside or use the pseudo-elements.

h2 {
    color: #ffffff;
}
.box {
  position: relative;
  width: 50%;
  height: 50%;
  padding: 10px;
  text-align: center;
  margin: 50px auto;
}

.box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.box:hover::before {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

<div class="box">
  <h2>TEST TEXT</h2>
</div>

What is the best way to avoid font-size scaling when transforming its container?

3 Answers3