Javascript 缩小边界半径div元素并保持在相同的位置，即蛋形

我有一个鸡蛋形状的div元素，旋转了140度

HTML:

<div id="egg-container">
    <div id="egg-blue" class="egg egg-large"></div>
</div>

#egg-container {
    width: 150px;
    height: 150px;
    position: relative;
    border-radius: 50%;
    border: 1px solid red;
    margin: 0 auto;
}

.egg {
    position: absolute;
    background-image: radial-gradient(#00F9AF, #0054FD 70%);
    box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    height: 10px;
    width: 10px;
    top: 75px;
}

#egg-blue {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform: rotate(140deg);
    opacity: 0.8;
}

.egg-lg {
    top: 25px;
    right: -25px;
    height: 160px;
    width: 140px;
}

.egg-md {
    /* How to scale down correctly? */
}

.egg-sm {
    /* How to scale down correctly? */
}

.egg-xs {
    /* How to scale down correctly? */
}

我的目标是利用JavaScript在大型、中型、小型和超小型之间简单地切换类。我知道如何使用切换类

但是当类在

-lg

，

-md

，

-sm

，

-xs

之间变化时，我很难正确地将这些点连接起来。它看起来太快、起伏不定等

代码之外的另一种想象方式是鲜花盛开。当我用JavaScript切换类时，这就是我试图实现的目标。请注意，红色圆圈样式是用作视觉中心的

我想让你看到的鸡蛋保持其长宽比和旋转。根据应用的类选择器，只需将元素放大或缩小即可

我认为目前我的问题的根源是我正在硬编码像素的宽度和高度

如果你有什么想法，请插进来

这是小提琴：

---

谢谢。

您可以使用

变换：比例（0.5）缩小元素的比例：

您可以将其添加到以前的
变换中，如
变换：旋转（140度）比例（1）
，将宽度和高度以及其他内容移动到
id
蛋蓝
，并用新的
转换填充类，然后使用javascript在类之间切换：


var egg=document.getElementById（'egg-blue'）；	
document.getElementById（'big'）.addEventListener（'click'，function（）{
egg.classList.add（“egg-large”）；
鸡蛋。分类列表。移除（“鸡蛋培养基”）；
egg.classList.remove（“小鸡蛋”）；
});
document.getElementById（'medium'）。addEventListener（'click'，function（）{
添加（“蛋培养基”）；
egg.classList.remove（“egg-large”）；
egg.classList.remove（“小鸡蛋”）；
});
document.getElementById（'small'）.addEventListener（'click'，function（）{
egg.classList.add（“egg small”）；
egg.classList.remove（“egg-large”）；
鸡蛋。分类列表。移除（“鸡蛋培养基”）；
});
#鸡蛋容器{
宽度：150px；
高度：150像素；
位置：相对位置；
边界半径：50%；
边框：1px纯红；
保证金：0自动；
}
.鸡蛋{
位置：绝对位置；
背景图像：径向梯度（#00F9AF，#0054FD 70%）；
盒影：-2px-2px 20px rgba（255，255，255，0.5）嵌入，0px 0px 2px rgba（0，0，0，0.5）；
框大小：边框框；
溢出：隐藏；
-webkit过渡：所有1.0版本都很轻松；
-moz过渡：所有1.0版本都很轻松；
-o-transition：所有1.0s的易用性；
过渡期：所有1.0秒轻松；
高度：10px；
宽度：10px；
顶部：75px；
}
#蛋蓝{
边界半径：50%50%50%50%/60%60%40%40%；
不透明度：0.8；
顶部：25px；
右：-25px；
高度：160px；
宽度：140px；
}
1.大鸡蛋{
变换：旋转（140度）比例（1）；
}
.鸡蛋培养基{
变换：旋转（140度）比例（0.7）；
}
1.鸡蛋小{
变换：旋转（140度）比例（0.4）；
}
#钮扣{
位置：绝对位置；
底部：0；
}

大的
中等
小的
翻转类是什么意思？你的意思是翻转鸡蛋形状吗？我会改写询问，但本质上，改变鸡蛋形状大小，是的-基于切换类。但我希望蛋形的位置保持在那里。放大或缩小尺寸即可。这是否更清楚？