使用以下方法时，如何使li元素不会移动：hover？将圆形和边界半径应用于li元素。我试过让ul容器更大，但这似乎不起作用。谢谢你的帮助。
码：
body {}
main {
display: flex;
background: #eeeeee;
min-height: 100vh;
padding: 1em;
}
h1 {
font-family: arial;
font-size: 1.4em;
padding-left: 1em;
}
ul {
padding-top:50px;
min-height: 600px;
position:relative;
}
li {
position:relative;
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
}
li:hover {
display: inline-block;
position:relative;
width: 90px;
height: 90px;
z-index: 10;
background-color: green;
line-height: 90px;
}<body>
<main>
<h1>
My animated Menu
</h1>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
</main>
</body>使用CSS3 transforms，这样元素可以自由移动或缩放到DOM中，而不会影响布局大小。
一个很好的奖励：动画在fps方面将更有效，因为不会在每个帧上重新计算布局（将使用GPU）
ul {
padding-top: 50px;
}
li {
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: transform 0.5s, background-color 1s;
}
li:hover {
display: inline-block;
position: relative;
transform: scale(1.5);
z-index: 10;
background-color: green;
}<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>