Question

在javascript中单击按钮后，有人可以帮我使这个正方形旋转吗？我是一个非常初学者，绝对不知道。也许我的CSS不够好，所以我无法在js中找到解决方案？我所能做的就是声明变量，addEventListner应该看起来像（“ click”，function（））。我可以想象函数应该包含该正方形的初始位置（0），然后将例如10deg添加到该初始位置...现在我卡住了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Powiększ</title>
    <style>
        button {
            padding: 10px;
            font-size: 50px;
            font-family: sans-serif;
            background-color: transparent;
            border: 2px solid black;
        }

        .square {
            width: 100px;
            height: 100px;
            background-color: #000;
            position: fixed;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
    </style>
</head>

<body>
    <button>Obróć</button>
    <div class="square"></div>

</body>

</html>

Answer 1

您将需要使用一些javascript：

document.getElementById('btn').onclick = () => {
  document.getElementById('square').style.transform = 'rotate(90deg)';
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Powiększ</title>
  <style>
    button {
      padding: 10px;
      font-size: 50px;
      font-family: sans-serif;
      background-color: transparent;
      border: 2px solid black;
    }
    
    .square {
      width: 100px;
      height: 100px;
      background-color: #000;
      position: fixed;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      transition: all 2s;
    }
  </style>
</head>

<body>
  <button id="btn">Obróć</button>
  <div id="square" class="square"></div>

</body>

</html>

Answer 2

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Powiększ</title>
	<style>
		button {
			padding: 10px;
			font-size: 50px;
			font-family: sans-serif;
			background-color: transparent;
			border: 2px solid black;
		}

		.square {
			width: 100px;
			height: 100px;
			background-color: #000;
			position: fixed;
			top: calc(50% - 50px);
			left: calc(50% - 50px);
			-moz-transition: transform 1s;
			-webkit-transition: transform 1s;
			transition: transform 1s;
		}
	</style>
</head>

<body>
	<button onclick="myFunction()">Obróć</button>
	<div class="square"></div>

	<script>
		var initioalRv = 20;
		function myFunction() {
			var elements = document.getElementsByClassName("square");
			for (var i = 0; i < elements.length; i++) {
				elements[i].style.transform = `rotate(${initioalRv}deg)`;
			}
			initioalRv += 20;
		}
	</script>
</body>

</html>

这会引起您的问题。我更改了您的代码

将onCLick添加到了button。
添加一些CSS来为旋转设置动画。
添加了javascript部分。

单击按钮即可旋转正方形

2 个答案: