Question

在你投票之前，我知道这个问题已被提出，但我对这个问题有不同的看法。这是原始的堆栈溢出问题，一旦阅读，我将在最后发布我的转折。

＆＃34;我希望有一种相对简单的方法可以将网页旋转一点点，大约30度左右，同时仍然保持其功能齐全和可用。我完全控制页面，并可以修改它，以便在需要时更容易。我宁愿不在SVG中重写整个内容，但是javascript和CSS / HTML可能会有效吗？有没有办法使用CSS，Javascript或其他一些允许我完成此操作的跨浏览器方法？＆＃34;

扭曲：我的代码只旋转-30度一次（用HTML编写）。我想要一个按钮，一旦你按下它，它将使网页旋转比现在多-30度。欣赏它。

代码（在转动网页时是静态的）：

＆＃13;

<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;

Answer 1

您可以在按钮点击时使用javascript进行轮换。

希望以下代码可以帮助您。

＆＃13;

<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;

通过代码旋转网页w / Button

1 个答案: