在你投票之前,我知道这个问题已被提出,但我对这个问题有不同的看法。这是原始的堆栈溢出问题,一旦阅读,我将在最后发布我的转折。
"我希望有一种相对简单的方法可以将网页旋转一点点,大约30度左右,同时仍然保持其功能齐全和可用。 我完全控制页面,并可以修改它,以便在需要时更容易。我宁愿不在SVG中重写整个内容,但是javascript和CSS / HTML可能会有效吗? 有没有办法使用CSS,Javascript或其他一些允许我完成此操作的跨浏览器方法?"
扭曲:我的代码只旋转-30度一次(用HTML编写)。我想要一个按钮,一旦你按下它,它将使网页旋转比现在多-30度。欣赏它。
代码(在转动网页时是静态的):
<html>
<head>
<style type="text/css" media="screen">
body {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod='auto expand');
-moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
-o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0);
}
</style>
</head>
<body>
<p>Testing</p>
<p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p>
</body>
</html>
&#13;
答案 0 :(得分:0)
您可以在按钮点击时使用javascript进行轮换。
希望以下代码可以帮助您。
<html>
<body onLoad="rotate()">
<div class="rot">
<p>Testing</p>
<p><a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html">Matrix calculator here</a></p>
<button id="btn">Rotate</button>
</div>
<script>
var initial_rotation=0;
var btn=document.getElementById("btn");
var rotateDiv=document.querySelector(".rot");
btn.addEventListener("click",rotate);
function rotate(){
initial_rotation -=30;
rotateDiv.style.WebkitTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.msTransform="rotate(" + initial_rotation + "deg)";
rotateDiv.style.transform="rotate(" + initial_rotation + "deg)";
}
</script>
</body>
</html>
&#13;