如何用HTML和CSS创建花朵结构？8片花瓣环绕圆心的transform设置

我尝试使用HTML和CSS创建花朵结构，但无法实现花瓣环绕圆心的效果。以下是我的代码：

CSS代码 #

.flower{
  height: 600px;
  width: 600px;
  margin: 20px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  position:  relative;
}

.mid{
  width:  200px;
  height: 200px;
  border-radius:  50%;
  background: #35414d;
  z-index:  4;
}

.petal{
  position:  absolute;
  left: 40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:  #b5a9d4;
}

.petal.p1 {
  transform: rotate(22.5deg);
   z-index: 5;
}

.petal.p2 {
  transform: rotate(50deg);
   z-index: 5;
}

.petal.p3 {
  transform: rotate(100deg);
   z-index: 5;
}

HTML代码 #

<div class="flower" >
<div class="mid"></div>
  <div class="petal p1"></div>
  <div class="petal p2"></div>
  <div class="petal p3"></div>
  <div class="petal p4"></div>
  <div class="petal p5"></div>
  <div class="petal p6"></div>
  <div class="petal p7"></div>
  <div class="petal p8"></div>
</div>

请问设置哪些transform值能让8片花瓣完美环绕中心圆？

解决方案 #

核心问题有两个：

• 花瓣当前的旋转原点是自身中心，而非花朵中心，导致旋转后位置偏移
• 手动设置的旋转角度没有均分360度，无法均匀排列

修正后的代码方案 #

方法一：通过translate定位+rotate旋转

先调整花瓣的基础样式，将旋转原点间接设为花朵中心，再按45度间隔设置旋转角度：

.flower{
  height: 600px;
  width: 600px;
  margin: 20px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  position:  relative;
}

.mid{
  width:  200px;
  height: 200px;
  border-radius:  50%;
  background: #35414d;
  z-index:  4;
}

.petal{
  position: absolute;
  /* 将花瓣左上角定位到花朵中心 */
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #b5a9d4;
  /* 把花瓣的右侧边缘对齐到花朵中心，确保旋转时绕中心转动 */
  transform: translateX(-100%);
  z-index: 3;
}

/* 8片花瓣均分360度，相邻角度差45度 */
.petal.p1 { transform: translateX(-100%) rotate(0deg); }
.petal.p2 { transform: translateX(-100%) rotate(45deg); }
.petal.p3 { transform: translateX(-100%) rotate(90deg); }
.petal.p4 { transform: translateX(-100%) rotate(135deg); }
.petal.p5 { transform: translateX(-100%) rotate(180deg); }
.petal.p6 { transform: translateX(-100%) rotate(225deg); }
.petal.p7 { transform: translateX(-100%) rotate(270deg); }
.petal.p8 { transform: translateX(-100%) rotate(315deg); }

方法二：直接设置transform-origin

如果想保留原有的left:40px定位，可以手动设置旋转原点为花朵中心：

.flower{
  height: 600px;
  width: 600px;
  margin: 20px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  position:  relative;
}

.mid{
  width:  200px;
  height: 200px;
  border-radius:  50%;
  background: #35414d;
  z-index:  4;
}

.petal{
  position: absolute;
  left: 40px;
  top: 50%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #b5a9d4;
  /* 花朵中心的x坐标是300px，减去花瓣left值40px，得到旋转原点的x偏移量；y轴设为自身中心50% */
  transform-origin: 260px 50%;
  z-index: 3;
}

/* 同样按45度间隔设置旋转角度 */
.petal.p1 { transform: rotate(0deg); }
.petal.p2 { transform: rotate(45deg); }
.petal.p3 { transform: rotate(90deg); }
.petal.p4 { transform: rotate(135deg); }
.petal.p5 { transform: rotate(180deg); }
.petal.p6 { transform: rotate(225deg); }
.petal.p7 { transform: rotate(270deg); }
.petal.p8 { transform: rotate(315deg); }

原理说明 #

• 8片花瓣要均匀环绕中心，必须将360度圆周平均分割，每片花瓣的角度差为360°/8 = 45°
• 旋转时必须确保旋转原点是花朵的中心，这样旋转后花瓣才能以中心为轴均匀分布

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