纯 css 无法动态修改 rotatex/rotatey 数值，因其无变量和运行时状态；必须用 javascript 操作 style.transform 实时更新角度，并通过 dataset 或闭包维护当前角度值。
纯 CSS 无法响应按钮点击来动态修改 rotateX/rotateY 的数值——它没有变量或运行时状态，@keyframes 和 transform 都是静态声明。必须靠 JavaScript 操作元素的 style.transform 才能实时控制角度。
为什么不能只用 CSS + :checked 或 data-* 属性
CSS 伪类（如 :checked）或属性选择器（如 [data-angle="45"]）确实能触发样式变化，但它们依赖 DOM 属性变更后手动重写整套规则，不支持数值插值、无状态记忆、无法做加减运算。比如你点“+10°”按钮，CSS 没法把当前 rotateY(30deg) 自动变成 rotateY(40deg)；它只能预设好 .angle-30、.angle-40 这类固定类名，维护成本爆炸。
核心实现：用 JS 直接改 style.transform
给柱状图容器（比如一个 div class="chart-3d"）绑定按钮事件，读取/更新当前旋转角度并写入 style.transform。关键点：
- 用
dataset或闭包保存当前角度值，避免反复解析getComputedStyle - 组合多个轴向旋转时，注意顺序：
rotateX() rotateY()和rotateY() rotateX()效果不同 - 不要覆盖其他 transform 效果（如缩放、平移），用
transform: rotateX(...) rotateY(...) scale(...)全量重写 - 若柱状图由多个子元素（每根柱子）组成，统一控制父容器即可，别逐个操作子项
示例（简化版）：
const chart = document.querySelector('.chart-3d');
let currentY = 0;
let currentX = -20;
<p>document.getElementById('rotate-y-plus').addEventListener('click', () => {
currentY += 15;
chart.style.transform = <code>rotateX(${currentX}deg) rotateY(${currentY}deg)</code>;
});</p><p>document.getElementById('reset-btn').addEventListener('click', () => {
currentX = -20;
currentY = 0;
chart.style.transform = <code>rotateX(${currentX}deg) rotateY(${currentY}deg)</code>;
});
</p>
容易被忽略的兼容性与性能细节
三维变换在低端设备或旧版 Safari 上可能卡顿或失效，需主动兜底：
- 检查
transform-style: preserve-3d是否生效——父容器必须设它，否则子元素会被拍平 - 避免在
transform中混用translateZ()和百分比单位，易触发重排 - 鼠标拖拽交互时，用
requestAnimationFrame节流更新，别在mousemove里直接设style.transform - 如果柱子是用 CSS 伪元素或绝对定位模拟的，确保它们的
transform-origin一致，否则旋转中心偏移
真正难的不是算角度，而是让旋转不抖、不跳、不丢失透视感——这取决于你是否在父级正确设置了 perspective，以及有没有无意中触发了层叠上下文断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
