通过代码实现带按钮的网页旋转（含特殊定制需求）

嘿，这个需求我之前刚好折腾过，完全不用SVG重写整个页面，用CSS配合一点点JS就能轻松搞定，而且页面的所有交互功能都能正常用！给你分享几个实用的方案：

一、最省心的CSS基础方案 #

直接给页面的根容器（比如body或者你自定义的外层容器）加上CSS变换就能实现，这是最简单的方式：

body {
  /* 核心：旋转30度 */
  transform: rotate(30deg);
  /* 以页面中心为旋转原点，默认就是这个，可按需改成左上角等位置 */
  transform-origin: center center;
  /* 旋转后内容容易溢出，调整尺寸避免裁切 */
  width: 120vw;
  min-height: 120vh;
  /* 把容器拉回页面中心 */
  margin-left: -10vw;
  margin-top: -10vh;
  /* 隐藏横向溢出的滚动条 */
  overflow-x: hidden;
}

这里要注意：如果页面有position: fixed的元素（比如固定导航栏），它们可能会脱离旋转的容器，这时候要么把固定元素放到旋转容器外面单独处理，要么给它们也加上相同的transform属性就行。

二、JavaScript动态控制方案 #

如果你需要根据用户操作（比如按钮点击、滚动事件）动态调整旋转角度，用JS来修改CSS属性就很灵活：

// 获取页面的根容器，这里用body为例
const pageContainer = document.body;

// 封装一个旋转函数，参数是旋转角度
function rotatePage(degrees) {
  pageContainer.style.transform = `rotate(${degrees}deg)`;
}

// 调用示例：页面加载完成后旋转30度
window.addEventListener('load', () => {
  rotatePage(30);
});

放心，旋转后的按钮、输入框这些交互元素的点击区域完全正常，因为CSS transform只是视觉上的变换，不会改变元素的实际布局盒模型，所以功能不受影响。

三、一些避坑小贴士 #

• 如果页面里有iframe，需要单独给iframe元素也添加transform属性，不然iframe内部的内容不会跟着页面一起旋转。
• 要是发现旋转后内容还是有裁切，可以再调大容器的width和height值，比如改成130vw、130vh，再对应调整margin让容器居中。
• 现代浏览器对CSS transform的兼容性很好，不用额外加前缀，老版本IE的话可能需要加-ms-transform，不过现在应该很少需要考虑了。

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