如何在HTML/CSS网站中镜像/翻转emoji，用于制作上下页导航按钮？

完全不需要将emoji导出为PNG资源，仅靠原生CSS就能实现任意方向的翻转效果，性能更好且无需额外维护图片资源。 #

实现逻辑 #

• 给包裹emoji的元素设置display: inline-block（transform属性对原生行内元素不生效，需要先把行内元素转为行内块/块级元素）
• 用transform: scaleX(-1)实现水平镜像翻转，刚好满足你做向左的previous按钮的需求
• 如果需要垂直翻转可以用transform: scaleY(-1)，同时水平+垂直翻转用transform: scale(-1, -1)

完整代码示例 #

<!-- 按钮HTML结构 -->
<span class="nav-btn next">👟</span>
<span class="nav-btn prev">👟</span>

/* 按钮基础样式 */
.nav-btn {
  display: inline-block;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
/* 前一页按钮翻转处理 */
.prev {
  transform: scaleX(-1);
}
/* 可选hover交互效果 */
.nav-btn:hover {
  filter: brightness(1.1);
  transform: scale(1.1);
}
.prev:hover {
  /* 要保留翻转效果，所以hover的scale要带负号 */
  transform: scaleX(-1) scale(1.1);
}

补充说明 #

该方案兼容所有现代浏览器（Chrome、Firefox、Safari、Edge 均支持），无需担心适配问题。如果需要对emoji做更复杂的样式调整，也可以搭配filter属性实现灰度、亮度、对比度等自定义效果，灵活度远高于固定PNG图片。

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