如何实现点击按钮控制网页180度翻转的开关功能？

完全可以实现，核心思路是用CSS类标记旋转状态，通过JavaScript切换这个类的存在，还能加过渡动画让翻转更丝滑。直接上代码：

1. HTML 结构 #

先加一个触发按钮：

<button id="rotateToggle">点击切换网页旋转状态</button>

2. CSS 样式 #

给body设置过渡效果，再写专门的旋转类：

body {
  /* 平滑过渡效果，不需要的话直接删掉这行 */
  transition: transform 0.5s ease;
}

/* 旋转180度的类 */
body.rotated {
  transform: rotate(180deg);
  /* 兼容旧版浏览器的前缀，现代浏览器可省略 */
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

3. JavaScript 逻辑 #

给按钮绑定点击事件，切换body的rotated类：

const toggleBtn = document.getElementById('rotateToggle');
const body = document.body;

toggleBtn.addEventListener('click', () => {
  body.classList.toggle('rotated');
});

说明 #

• 点击按钮时，JS会给body添加/移除rotated类，CSS自动应用/取消旋转样式
• 过渡效果通过transition属性实现，你可以调整0.5s改变动画时长，ease是缓动函数，换成linear就是匀速翻转
• 不需要平滑过渡的话，直接删掉body里的transition行就行

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