Html 通过带按钮的代码旋转网页

在你投票否决之前，我知道有人问过这个问题，但我对这个问题有不同的看法。这里是原始的堆栈溢出问题，一旦阅读，我将在最后发布我的扭曲

“我希望有一种相对简单的方法可以将网页旋转一点点，大约30度左右，同时仍然保持其功能和可用性。 我完全控制页面，如果需要的话，我可以修改页面使之更容易。虽然我不想用SVG重新编写整个内容，但是javascript和CSS/HTML可能会起作用？ 有没有一种方法可以使用CSS、Javascript或其他跨浏览器方法来实现这一点？”

Twist:我的代码只旋转-30度一次（用HTML编写）。我想有一个按钮，一旦你按下它，它将旋转网页的-30度以上，它是目前在。谢谢

代码（在打开网页时是静态的）：

身体{
-ms过滤器：“progid:DXImageTransform.Microsoft.Matrix（M11=0.86602540，M12=0.50000000，M21=-0.50000000，M22=0.86602540，sizingMethod='auto expand'）”；
过滤器：progid:DXImageTransform.Microsoft.Matrix（M11=0.0，M12=0.50000000，M21=-0.50000000，M22=0.86602540，sizingMethod='auto expand'）；
-莫兹变换：矩阵（0.86602540，-0.50000000,0.50000000,0.86602540,0,0）；
-webkit变换：矩阵（0.86602540，-0.50000000,0.50000000,0.86602540,0,0）；
-o变换：矩阵（0.86602540，-0.50000000,0.50000000,0.86602540,0,0）；
}
测试

您可以在单击按钮时使用javascript进行旋转

希望下面的代码能帮助你

测试


旋转
var初始旋转=0；
var btn=document.getElementById（“btn”）；
var rotateDiv=document.querySelector（“.rot”）；
btn.addEventListener（“点击”，旋转）；
函数rotate（）{
初始旋转-=30；
rotateDiv.style.WebKittTransform=“旋转（“+初始旋转+”度）”；
rotateDiv.style.msTransform=“旋转（“+初始旋转+”度）”；
rotateDiv.style.transform=“旋转（“+初始旋转+”度）”；
}

将元素包装在一个div中，并向该div添加一个类。使用上面的JS代码段。