3

É 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>

2
  • Se o elemento possuir um texto, ele deve ser afetado pelo scale?
    – Woss
    Commented 22/11/2018 às 11:31
  • @AndersonCarlosWoss não necessariamente, o que está me incomodando mesmo a a borda crescendo junto com o elemento, pois o conteúdo interno da div eu já imaginava que cresceria junto
    – hugocsl
    Commented 22/11/2018 às 11:52

1 Resposta 1

5

Isto acontece porque o transform: scale(2) escala todo o objeto, inclusive sua borda. Para que não aconteça, tavez seja mais interessante aumentar seu height e width, mas seu conteúdo não vai acompanha-lo. Se for mesmo necessário usar scale, experimente trocar o border por um box shadow pois não existe pixel "quebrado" mas estranhamente com box shadow funciona, como no exemplo:

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>

3
  • 2
    É uma opção valeu a dica!
    – hugocsl
    Commented 22/11/2018 às 12:24
  • Espero ter ajudado. Disponha. Commented 22/11/2018 às 12:26
  • 1
    só acho interessante substituir os meio pixels por outra unidade em, teoricamente pixels só podem e devem ser representados por inteiros. Commented 22/11/2018 às 13:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .