É uma pergunta bem simples, mas não encontrei resposta...
Eu tenho um elemento que tem uma borda
de 1px
. Porém quando eu faço um :hover
nele eu aplico um transform:scale()
mas a largura da borda
dele tb parece aumentar, até tentei colocar 0.01px
, mas não deu certo.
Tem alguma forma de corrigir isso sem ter que criar um pseudo-elemento?
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>
scale
?