如何在椭圆形容器中独立旋转图像并恢复至初始状态？

你当前给.eclipse-outline容器设置了transform: rotate(20deg)，这个旋转会传递给所有子元素，导致图像也跟着旋转了20度。要让图像回到原始位置，只需要给图像设置反向的旋转值即可。

修改.eclipse-image img的transform属性为rotate(-20deg)，就能抵消容器的旋转效果：

.eclipse-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(-20deg); /* 反向旋转抵消容器的旋转 */
  border-radius: 50%;
}

完整代码示例：

.eclipse-outline {
  width: 400px;
  height: 500px;
  border-radius: 50%;
  border: 3px solid #fff;
  overflow: hidden;
  position: relative;
  padding: 20px;
  transform: rotate(20deg);
}

.eclipse-image {
  width: 100%;
  height: 100%;
}

.eclipse-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: rotate(-20deg);
  border-radius: 50%;
}

<div class="eclipse-outline">
  <div class="eclipse-image"><img src="https://jourdan.nl/wp-content/uploads/2023/12/healthy-lifestyle-woman-eating-salad-smiling-happy-outdoors-beautiful-day-young-female-food-outside-summer-34259122.jpg" /></div>
</div>

设置完成后，容器会保持20度旋转的椭圆形边框样式，内部图像则恢复到原始的未旋转状态。

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