js实现div旋转
使用 CSS transform 和 JavaScript 控制旋转
通过 JavaScript 动态修改 CSS 的 transform 属性，可以实现 div 的旋转效果。以下是一个基础示例：
<div id="rotateDiv" style="width: 100px; height: 100px; background-color: red;"></div>
<button onclick="rotateDiv()">旋转</button>
<script>
let angle = 0;
function rotateDiv() {
angle += 45; // 每次旋转45度
document.getElementById("rotateDiv").style.transform = `rotate(${angle}deg)`;
}
</script>使用 CSS 动画实现连续旋转
通过 CSS @keyframes 定义旋转动画，再用 JavaScript 控制动画的启停：
#rotateDiv {
width: 100px;
height: 100px;
background-color: blue;
animation: spin 2s linear infinite;
animation-play-state: paused;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}<div id="rotateDiv"></div>
<button onclick="toggleRotation()">切换旋转</button>
<script>
function toggleRotation() {
const div = document.getElementById("rotateDiv");
const isPaused = div.style.animationPlayState === 'paused';
div.style.animationPlayState = isPaused ? 'running' : 'paused';
}
</script>通过 requestAnimationFrame 实现平滑旋转
适用于需要高性能或复杂控制的场景：
<div id="rotateDiv" style="width: 100px; height: 100px; background-color: green;"></div>
<button onclick="startRotation()">开始旋转</button>
<button onclick="stopRotation()">停止旋转</button>
<script>
let angle = 0;
let animationId = null;
function startRotation() {
cancelAnimationFrame(animationId); // 防止重复启动
const div = document.getElementById("rotateDiv");
function update() {
angle = (angle + 1) % 360; // 每帧增加1度
div.style.transform = `rotate(${angle}deg)`;
animationId = requestAnimationFrame(update);
}
update();
}
function stopRotation() {
cancelAnimationFrame(animationId);
}
</script>旋转中心点调整
默认旋转中心为元素中心，可通过 transform-origin 修改：
document.getElementById("rotateDiv").style.transformOrigin = "left top"; // 左上角为旋转中心注意事项
- 旋转角度单位为
deg（度），也支持rad（弧度）。 - 复合变换时需注意
transform属性的顺序（如rotate和translate的顺序会影响结果）。 - 性能优化：对大量元素旋转时建议使用 CSS 硬件加速（如
will-change: transform）。
