Kevin Powell - Community•12mo ago

scaleX()

So I understand how to use the typical css scaleX() but I am wanting to do is confusing. First I want to make a hover effect that allows me to make a button looked like it grew to the right, however I am getting it gowing from the middles and moving from the center out. I am confused how to do this

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: transform 1s ease-in-out;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  transform : scaleX(1.5);
  font-size: 1.5em;
  text-align: left;
  transform: scalex(1.5);
}

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: transform 1s ease-in-out;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  transform : scaleX(1.5);
  font-size: 1.5em;
  text-align: left;
  transform: scalex(1.5);
}

14 Replies

Jochem•12mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

MDN Web Docs

transform-origin - CSS: Cascading Style Sheets | MDN

The transform-origin CSS property sets the origin for an element's transformations.

althepal78OP•12mo ago

I am focusing on small components for my personal site and I seen something like this before 🙂

althepal78OP•12mo ago

yeah that is not working, I have done this and it stretches out the letters too, https://codepen.io/althepal78/pen/XWOBrBm

AlThePal78

CodePen

Using ScaleX

...

althepal78OP•12mo ago

should I be just adding size in JS I am a confused with this

Jochem•12mo ago

stretching the entire element including the letters is what scalex does, yeah. You can animate a right padding or width instead, that'll only scale the bounding box you have to be a little careful with hover state changes when you exit the element, but it shouldn't happen too often

althepal78OP•12mo ago

I tried using transition width as well but that did not work either when i said transition: width 2s; it did it instantaniously

Jochem•12mo ago

you have to then also change the width in the :hover state

althepal78OP•12mo ago

Okay so I need to figure out how to do that button thing I seen before I suck using psuedo elements so maybe they used that I don't know

Jochem•12mo ago

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: padding 1s ease-in-out;
  transform-origin: left center;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  font-size: 1.5em;
  text-align: left;
  padding-right: 5rem;
}

.button {
  margin: 2rem;
  font-size: 1.5em;
  padding: 0.5rem;
  background-color: $accent-color;
  color: $bg-color;
  transition: padding 1s ease-in-out;
  transform-origin: left center;
}

.button:hover,
.button:focus-visible {
  color: $text-alt;
  font-size: 1.5em;
  text-align: left;
  padding-right: 5rem;
}

you could change padding-right to width and then change the transition to transition: width 1s ease-in-out;

althepal78OP•12mo ago

that did not work for me with the width

Jochem•12mo ago

oh, and you have to set a fixed width on the base class... probably better to use padding tbh you can't animate from properties that have an auto value, and that's the default for width

althepal78OP•12mo ago

ah shoot dammit lol so the padding thing worked perfectly for now lol thank you 😉

Jochem•12mo ago

glad to help 🙂

clevermissfox•12mo ago

Transform-origin is a tricky one to know about but so important !

Gaming

Programming

scaleX()