如何用JS按钮控制CSS transform，实现初始关闭、点击切换效果？

原来代码的问题 #

• 初始CSS给#myplayer设置了transform: rotateY(180deg)，不符合“打开页面时关闭翻转效果”的需求
• 直接操作player.transform是错误的，DOM元素没有这个属性，得用正确的样式控制方式

方法一：直接操作元素style属性 #

这种方式适合简单场景，直接修改元素的行内样式

<button onclick="toggleMirror()">mirror</button>
<div id="myplayer">播放器内容</div>

#myplayer {
  /* 初始状态无翻转效果，满足页面打开时的需求 */
  transition: transform 0.3s; /* 可选：加个过渡动画，切换更顺滑 */
}

const player = document.getElementById("myplayer");

function toggleMirror() {
  // 判断当前是否已经有翻转效果
  if (player.style.transform === "rotateY(180deg)") {
    player.style.transform = ""; // 清空样式，恢复初始状态
  } else {
    player.style.transform = "rotateY(180deg)"; // 开启翻转
  }
}

方法二：用CSS类控制（推荐） #

这种方式更清晰，样式和逻辑分离，后续改样式直接动CSS就行

<button onclick="toggleMirror()">mirror</button>
<div id="myplayer">播放器内容</div>

#myplayer {
  transition: transform 0.3s; /* 可选过渡动画 */
}

/* 单独定义翻转的类 */
.mirror {
  transform: rotateY(180deg);
}

const player = document.getElementById("myplayer");

function toggleMirror() {
  // 用classList.toggle一键切换类的存在，自动处理开/关逻辑
  player.classList.toggle("mirror");
}

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