Prevent Element Edge from Growing by Using Transform: Scale

Question

Prevent Element Edge from Growing by Using Transform: Scale

Navigation

#1 by (6 votes)

3

It's a very simple question, but I did not find an answer ...

I have an element that has a borda of 1px . But when I make a :hover on it I apply a transform:scale() but the width of the borda of it tb seems to increase, until I tried to put 0.01px , but it did not work.

Is there any way to fix this without having to create a pseudo-element ?

body {
    margin: 2rem;
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin-right: 1rem;
transition: transform 500ms;
}
.box:hover {
    transform: scale(2) translate(25%, 25%);
border: 0.1px solid #000;
}

<div class="box"></div>

html html5 css css3

asked by anonymous 22.11.2018 / 12:09

1 answer

Difference between // and / * ... * / Is it wise to use multiple paradigms in a C ++ project?

score 6 · Accepted Answer

This happens because transform: scale(2) scales the entire object, including its border. For it to not happen, it's even more interesting to increase your height and width , but your content will not go with it. If it is necessary to use scale, try changing the border to a shadow box because there is no pixel "broken" but strangely with box shadow it works, as in the example:

body {
    margin: 2rem;
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    box-shadow: 0px 0px 0px 1px #000;
    margin-right: 1rem;
    transition: box-shadow 500ms, transform 500ms;
}
.box:hover {
    transform: scale(2) translate(25%, 25%);
    box-shadow: 0px 0px 0px .55px #000;
}

<div class="box"></div>