javascript - 缩小 border-radius div 元素并保持相同位置，蛋形

Question

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

HTML:

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

CSS:

#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 切换类时，这基本上就是我想要完成的。请注意，红色圆圈样式用作视觉中心。

我希望您看到的那个鸡蛋保持其长宽比 和旋转。根据应用的类选择器，简单地将元素缩放到更大或更小。

我认为目前问题的根源在于我正在对像素宽度和高度进行硬编码。

如果您有任何想法，请插话。

这是 fiddle :https://jsfiddle.net/excqrun0/12/

谢谢。

Answer 1

您可以使用transform : scale(0.5); 来缩小元素:https://www.w3schools.com/css/css3_2dtransforms.asp

你可以将它添加到你之前的 transform 中，比如 transform: rotate(140deg) scale(1); ，将宽度和高度以及其他内容移动到 id egg-blue 并用新的 transform 填充类，并使用 javascript 在类之间切换:

var egg = document.getElementById('egg-blue'); 	
    
document.getElementById('big').addEventListener('click', function(){	
    egg.classList.add("egg-large");
    egg.classList.remove("egg-medium");
    egg.classList.remove("egg-small");
});

document.getElementById('medium').addEventListener('click', function(){	
    egg.classList.add("egg-medium");
    egg.classList.remove("egg-large");
    egg.classList.remove("egg-small");
});

document.getElementById('small').addEventListener('click', function(){	
    egg.classList.add("egg-small");
    egg.classList.remove("egg-large");
    egg.classList.remove("egg-medium");
});

#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%;
  opacity: 0.8;
  top: 25px;
  right: -25px;
  height: 160px;
  width: 140px;
}

.egg-large {
  transform: rotate(140deg) scale(1);
}

.egg-medium {
  transform: rotate(140deg) scale(0.7);
}

.egg-small {
  transform: rotate(140deg) scale(0.4);
}

#buttons{
    position: absolute;
    bottom: 0;
}

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

<div id="buttons">
    <button id="big"> BIG </button>
    <button id="medium"> MEDium </button>
    <button id="small"> small </button>    
 </div>