CSS transform属性＋js requestAnimationFrame函数实现旋转方块以及调整转动速度

遇到了一个面试题目，要求点击该div,div开始转动,再次点击转动速度增加点击stop按钮,div转动速度减小，使用requestAnimationFrame实现。

先上效果图：

 <style>#rotate {background-color: red;width: 200px;height: 100px;margin-top: 100px;transform: rotate(0deg);position: relative;}#stop {width: 100px;height: 50px;margin-top: 100px;}
</style><body><div id="rotate"></div><button id="stop">stop</button>
</body>

js代码，通过调整inc来改变旋转速度，

<script>var box = document.getElementById("rotate");var angle = 0;var inc = 0;function render() {box.style.transform = `rotate(${angle}deg)`;angle += inc;}(function animloop() {render();window.requestAnimationFrame(animloop);})();$("#rotate").click(function () {inc++;})$("#stop").click(function () {if (inc > 0) inc--;});
</script>

关于requestAnimationFrame的深入理解

requestAnimationFrame 知多少？ - 一像素 - 博客园

CSS transform属性＋js requestAnimationFrame函数实现旋转方块以及调整转动速度相关推荐

CSS transform属性的简单应用——双开门动画效果
1.效果演示 CSS transform属性有许多效果,平移.旋转.缩放等. 这里简单应用平移效果,实现双开门动画,以下为效果图. 2.设计思路设置一张居中的需要隐藏的底图. 设置封面图,平分成左右 ...
三棱锥四面体html css,CSS transform属性实现旋转的四面体
原创声明本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息: 笔名:来碗鸡蛋面简书主页:https://www.jianshu.com/u/4876275b5a73 邮箱:j ...
CSS transform属性
一,transform(变形) 1.transform字面的意思就是变形的意思,在CSS3中,transform支持的几个操作有 (1)旋转rotate. (2)扭曲skew. (3)缩放scale ...
css transform属性详解
transform的值: rotate() 旋转 transform:rotate(30deg): translate() 位移 transform:translate(100px,20px): sc ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述作业提交截止时间:09-01 任务目的深度理解掌握 transition-timing-function 以及它的意义学会配合使用 CSS transform 和CSS transiti ...
css transform旋转属性
将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
技术学派：使用JS transform属性，实现旋转木马效果
搭建舞台 ...<style type="text/css">.main{width: 900px;min-height: 100px;margin:0 auto;pa ...

CSS transform属性＋js requestAnimationFrame函数实现旋转方块以及调整转动速度

CSS transform属性＋js requestAnimationFrame函数实现旋转方块以及调整转动速度相关推荐

最新文章

热门文章