如何在可旋转翻转的圆形背面居中放置文本且无需频繁修改代码？

你不需要使用polygon()函数就能实现需求，核心是用Flex布局实现文本自动居中，同时设置内边距避免文本溢出圆形边界，具体修改如下：

调整后的CSS代码 #

.flip-box {
  background-color: transparent;
  width: 200px;
  height: 200px;
  text-align: center;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 200px;
  height: 200px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #ffffff;
  color: black;
}

.flip-box-back {
  background-color: #C8102E;
  color: white;
  font-size: 14px;
  transform: rotateY(180deg);
  /* 新增属性实现自动居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 内边距避免文本贴到圆形边缘 */
  padding: 24px;
  box-sizing: border-box;
}

/* 去掉p标签默认边距避免偏移 */
.flip-box-back p {
  margin: 0;
}

调整后的HTML代码 #

<a href="https://google.com">
  <div class="flip-box" style="height:200px; width:200px;">
    <div class="flip-box-inner">
      <div class="flip-box-front">
        <img src="/media/EiffelTower" alt="Paris" style="width:200px;height:200px;border-radius:50%">
      </div>
      <div class="flip-box-back">
        <p>The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p>
      </div>
    </div>
  </div>
</a>

修改说明 #

• 用Flex布局实现背面文本的水平+垂直双向自动居中，后续修改文本内容不需要调整任何布局代码
• 新增的内边距可以避免文本内容贴到圆形的边缘，保证文本始终在圆形可视区域内
• 修复了原HTML中嵌套a标签的非法写法，避免点击跳转异常
• 给正面图片添加了border-radius属性，和整体圆形样式保持一致

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