js控制旋转

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Rotation</title>
<style>
  .rotate {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 1s;
  }
</style>
</head>
<body>

<div class="rotate" id="box"></div>

<script>
  document.getElementById('box').style.transform = 'rotate(180deg)';
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Continuous Rotation</title>
<style>
  .rotate {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>

<div class="rotate"></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Rotation</title>
<style>
  .rotate {
    width: 100px;
    height: 100px;
    background-color: green;
    transition: transform 0.5s;
  }
</style>
</head>
<body>

<div class="rotate" id="interactiveBox"></div>

<script>
  document.getElementById('interactiveBox').addEventListener('click', function() {
    this.style.transform = 'rotate(' + (this.rotation || 0) + 'deg)';
    this.rotation = (this.rotation || 0) + 90;
  });
</script>

</body>
</html>