échelle d'un cercle sur le vol stationnaire en maintenant la largeur de la frontière

J'ai un cercle sans fond, seule frontière, et je veux à l'échelle sur le vol stationnaire:échelle d'un cercle sur le vol stationnaire en maintenant la largeur de la frontière

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

Voici un Fiddle: https://jsfiddle.net/u36nfxs0/2/

Le problème, comme vous pouvez le voir, est que la largeur de la bordure varie également. Y a-t-il un moyen d'agrandir le cercle en maintenant la largeur de sa bordure?

Merci!

Source

2017-09-22 Nikita

Ne pas utiliser transform, réglez intead les dimensions (largeur, hauteur, et des marges explicites:

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

Source

2017-09-24 18:38:41 vals

échelle d'un cercle sur le vol stationnaire en maintenant la largeur de la frontière

Répondre

Questions connexes