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" οnclick="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.我写的一个小项目:
代码在github上面 地址如下:
https://github.com/Macixsq1/timeBlock
提供大家学习