如何缩小椭圆形div元素并维持原有位置？附旋转140°椭圆div代码

嘿，我来帮你搞定这个问题！你现在有个已经旋转140度的椭圆形div，想要缩小它但保持位置不变，核心在于确保缩放时的变换原点和原旋转的原点一致，这样缩放后就不会跑偏啦。

核心方案：用transform: scale()配合正确的变换原点 #

因为你的元素已经应用了旋转变换，直接在transform属性里添加缩放（scale()）是最方便的方式，而且不会破坏原有布局逻辑。这里有几个关键细节：

• 保持变换原点为元素中心
  默认情况下transform-origin就是50% 50%（也就是元素中心），但如果你的代码里修改过这个值，一定要显式设置回中心，这样缩放时会以元素自身中心为基准，不会偏移。

• 变换顺序要注意
  CSS的transform是从右到左执行的，所以要把scale()放在旋转（rotate()）的后面，确保先完成旋转，再基于旋转后的形状进行缩放。

结合你的代码修改示例 #

首先补全你提到的椭圆形实现逻辑（因为你没写出完整的.egg尺寸和旋转代码），然后给出修改后的完整代码：

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;
  /* 让椭圆在容器中居中 */
  left: 50%;
  top: 50%;
  transform-origin: center center; /* 显式设置变换原点为中心 */
}

.egg-large {
  /* 原椭圆尺寸，根据你的需求调整 */
  width: 120px;
  height: 80px;
  /* 原旋转+居中偏移 */
  transform: translate(-50%, -50%) rotate(140deg);
}

/* 缩小后的样式，可直接修改.egg-large或新增类 */
.egg-large.shrinked {
  /* 添加scale(0.7)实现缩小，数值越小缩得越小，范围0-1 */
  transform: translate(-50%, -50%) rotate(140deg) scale(0.7);
}

另一种方案：直接调整尺寸+重新计算定位 #

如果你不想用scale()，也可以直接缩小.egg的width和height，但因为是绝对定位，需要重新计算偏移量来保持居中：

• 比如原尺寸是width:120px; height:80px，缩小70%后变成width:84px; height:56px
• 然后计算left和top值：left: (150 - 84)/2 = 33px; top: (150 - 56)/2 = 47px
• 这种方法适合需要改变元素占位（layout）的场景，但不如scale()灵活，尤其是元素有旋转时计算更麻烦。

注意事项 #

• 如果你的.egg不是用translate(-50%,-50%)居中的，要确保transform-origin设置为元素的实际中心位置，否则缩放会偏移。
• scale()不会改变元素在页面上的占位空间，只是视觉上缩小；如果需要让其他元素感知到尺寸变化，就用调整width/height的方案。

内容的提问来源于stack exchange，提问作者markreyes