スケールの境界線の幅を維持するホバー上の円

私はサークルの背景のない、唯一の境界線を持っている、と私はそれがホバーにスケールする：https://jsfiddle.net/u36nfxs0/2/スケールの境界線の幅を維持するホバー上の円

：ここ

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link type="text/css" rel="stylesheet" href="css/main.css" /> 
    <style> 
    #circle{ 
     border: 1px solid black; 
     width: 40px; 
     height: 40px; 
     border-radius: 50%; 
     margin: 20% auto; 
     transition: all 0.5s ease; 
    } 
    #circle:hover{ 
     cursor: pointer; 
     transform: scale(6); 
     border: 1px solid black; 
     transition: all 0.5s ease; 
    } 
    </style> 
</head> 
<body> 
    <div id="circle"> 
    </div> 
</body> 
</html>

をフィドルですあなたが見ることができるように、問題は、境界線の幅も同様に拡大するということです。ボーダーの幅を維持して円を拡大縮小する方法はありますか？

ありがとうございます！

出典

2017-09-22 Nikita

intead寸法（幅、高さ、および明示的な余白調整、変換は使用しないでください：

#circle { 
 
    border: 1px solid black; 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 50%; 
 
    margin: 20% auto 0 auto; 
 
    transition: all 5s ease; 
 
} 
 

 
#circle:hover { 
 
    cursor: pointer; 
 
    width: 240px; 
 
    height: 240px; 
 
    margin-top: calc(20% - 100px); 
 
}

<div id="circle"> 
 
</div>

を

出典

2017-09-24 18:38:41 vals

スケールの境界線の幅を維持するホバー上の円

答えて

関連する問題