旋转div平滑的最简单方法是使用CSS3的过渡效果和动画属性。可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div class="rotate-div"></div>
CSS:
.rotate-div {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s ease-in-out;
}
.rotate-div.rotate {
transform: rotate(45deg);
}
JavaScript:
var divElement = document.querySelector('.rotate-div');
divElement.addEventListener('click', function() {
divElement.classList.toggle('rotate');
});
这样,当点击div元素时,它将以平滑的动画旋转45度。你可以根据需要调整旋转角度、过渡时间和其他样式属性。
领取专属 10元无门槛券
手把手带您无忧上云