js操作tranform与transition动画问题 |
您所在的位置：网站首页 › transform中的translate动画效果 › js操作tranform与transition动画问题 |
js操作tranform与transition动画问题
|
1.要实现一个div点击旋转的功能，要怎样实现？比较简单的方法有：点击添加一个className,class写好一个动画效果animation. 还有一个办法就是使用dom.style.transform = 'rotateX('+90+'deg)'; 如果再在div的样式里面写好transition: transform 1s.就会有延迟效果而不是瞬间旋转。 2.完整的一个实现过程如下： .block{ transition: transform 1s; width:100px; height:100px; background-color:pink; } var num1 = document.querySelector('.num1'); function rotate(){ num1.style.transform = 'rotateX('+90+'deg)'; setTimeout(function(){ num1.style.transform = 'rotateX('+0+'deg)'; },1000) } 以上代码效果是点击div 方块就会x方向旋转90度，然后再转回来，各花费1秒。3.我写的一个小项目：
代码在github上面 地址如下： https://github.com/Macixsq1/timeBlock 提供大家学习
|
【本文地址】
今日新闻 |
推荐新闻 |