Поворот веб-страницы с помощью кода с кнопкой - PullRequest
Новая
       7

Поворот веб-страницы с помощью кода с кнопкой

0 голосов
/ 26 апреля 2018

До того, как вы проголосовали против, я знаю, что этот вопрос был задан, но у меня есть другой поворот в вопросе. Вот оригинальный вопрос переполнения стека, после прочтения я опубликую свой поворот в конце.

"Я надеюсь, что есть относительно простой способ немного повернуть веб-страницу, примерно на 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>

1 Ответ

0 голосов
/ 26 апреля 2018

Вы можете использовать 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>
...