Kevin Powell - Community•15mo ago

Is it possible to scale an element by a fixed about using only css

I have a style that display a scale effect when a focusable elements is focused. Here's the rough css for applied to an anchor tag:

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

I'm also applying this effect to buttons, inputs, etc. Is there anyway I can modify this code to scale the element by a set about (say 1rem) rather than a relative amount? My issue with the relative amount is that is doesn't look good with elements that have quite different sizes.

2 Replies

Joao•15mo ago

Don't think so, at least I've never seen it and the docs seem to be clear that it's a relative scaling: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

scale() - CSS: Cascading Style Sheets | MDN

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

Joao•15mo ago

You could use JavaScript to calculate the current dimensions of the element, and scale it based on a target dimensions by the right amount. You can get this information with: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Gaming

Programming

Is it possible to scale an element by a fixed about using only css