js操作tranform与transition动画问题

最新推荐文章于 2025-06-25 09:08:58 发布

原创最新推荐文章于 2025-06-25 09:08:58 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #动画

css 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种通过CSS和JavaScript实现的DIV元素点击后旋转动画的方法。利用CSS的transition属性配合JavaScript修改元素的transform属性，实现了平滑的旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.要实现一个div点击旋转的功能，要怎样实现？比较简单的方法有：点击添加一个className,class写好一个动画效果animation.

还有一个办法就是使用dom.style.transform = 'rotateX('+90+'deg)'; 如果再在div的样式里面写好transition: transform 1s.就会有延迟效果而不是瞬间旋转。

2.完整的一个实现过程如下：

<style>
.block{
transition: transform 1s;
width:100px;
height:100px;
background-color:pink;
}
</style>
<div class="block num1" onclick="rotate()"></div>
<script>
var num1 = document.querySelector('.num1');
function rotate(){
   num1.style.transform = 'rotateX('+90+'deg)';
  setTimeout(function(){
   num1.style.transform = 'rotateX('+0+'deg)';
},1000)
}
</script>

以上代码效果是点击div 方块就会x方向旋转90度，然后再转回来，各花费1秒。

3.我写的一个小项目：