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
Jochem•13mo ago
MDN Web Docs
transform-origin - CSS: Cascading Style Sheets | MDN
The transform-origin CSS property sets the origin for an element's transformations.
althepal78
althepal78OP•13mo ago
I am focusing on small components for my personal site and I seen something like this before 🙂
althepal78
althepal78OP•13mo ago
yeah that is not working, I have done this and it stretches out the letters too, https://codepen.io/althepal78/pen/XWOBrBm
althepal78
althepal78OP•13mo ago
should I be just adding size in JS I am a confused with this
Jochem
Jochem•13mo 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
althepal78
althepal78OP•13mo 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
Jochem•13mo ago
you have to then also change the width in the :hover state
althepal78
althepal78OP•13mo 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
Jochem•13mo 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;
althepal78
althepal78OP•13mo ago
that did not work for me with the width
Jochem
Jochem•13mo 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
althepal78
althepal78OP•13mo ago
ah shoot dammit lol so the padding thing worked perfectly for now lol thank you 😉
Jochem
Jochem•13mo ago
glad to help 🙂
clevermissfox
clevermissfox•13mo ago
Transform-origin is a tricky one to know about but so important !
Want results from more Discord servers?
Add your server