transform 动态旋转 需要js控制

最新推荐文章于 2022-01-19 22:36:16 发布
原创 最新推荐文章于 2022-01-19 22:36:16 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用JavaScript和CSS3实现一个简单的圆旋转动画，包括核心代码解析和原理说明。

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

<script>
  window.onload=function  () {
   var div=document.getElementsByTagName("div")[0];
   var angle=0;
   setInterval(function(){
      angle++;
      setCss3(div,{transform:"rotate("+angle+"deg)","transform-origin":"50% 50%"});
   },60)
  }
  function setCss3 (obj,attrObj) {
   for (var i in attrObj) {
     var newi=i;
if(newi.indexOf("-")>0){
  var num=newi.indexOf("-"); 
  newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
obj.style[newi]=attrObj[i];
newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
obj.style["webkit"+newi]=attrObj[i];
obj.style["moz"+newi]=attrObj[i];
obj.style["o"+newi]=attrObj[i];
obj.style["ms"+newi]=attrObj[i];
   }
  }
</script>
</head>
<body>
<div class="one">
</div>
利用JS的transform对图像进行处理，实现图像的旋转、缩放与适应
weixin_51858505的博客
01-27 2090
利用JS的transform，做一个图片查看器，对图像进行一些简单的处理，实现图像的查看、旋转、放大、缩小、宽适应、高适应、自适应……如果发现高适应（宽适应）后垂直（水平）方向仍有可滚动的滚动条，那么在计算父容器的高宽时，需要减去滚动条的宽度，即把代码中的$("#parent").height()全部换成($("#parent").height()-18)，$("#parent").width()全部换成($("#parent").width()-18)，注意加上括号。
JS利用CSS3 transform rotate 实现旋转转盘或背景（大转盘抽奖）
热门推荐
as66t的专栏
11-04 4万+
最近需要做一个旋转转盘抽奖的小组件，初步考虑之后决定用操作背景元素CSS 中的transform rotate 来做。即控制transform属性不断增加转盘的偏转角度值，来达到转动效果。 使元素围绕中心根据角度偏转，在元素的transform属性中可以这样写： transform:rotate(30deg);//偏转30度 -moz-transform:rotate(30deg);//兼
通过js获取元素css3的transform rotate旋转角度方法
weixin_30567225的博客
04-07 849
我们再试用jquery获取样式的时候是通过$('domName').css('transform')；的方式来获取元素的css样式，但是通过它获取到的css3的transform属性是以矩阵的方式呈现的：matrix(a, b, c, d, e, f);这样的返回值并不是我们想要的结果。 我们要想获取真正的旋转角度值就需要通过一系列的处理来过去，具体方法是： 1 <!DOCTYPE...
JS原生实现transform样式控制
weixin_39531565的博客
03-08 2261
function (node,type,val){ if(typeof node ==="object" && typeof node["transform"] ==="undefined" ){ node["transform"]={}; } if(arguments.length>=3){ //设置 var text =""; node["transform"][type] = val; for( item in nod
如何通过js获取到CSS3里面transform rotate旋转角度的度数，matrix解析
竹音林的专栏
11-24 2万+
如果你曾想通过下面这条语获取transform的值 $(objName).css('transform'); 很遗憾，获取到的是如下一个矩阵 matrix(a,b,c,d,e,f) 哈哈，看到这个矩阵，很多人都懵了，但是真想获取rotate的角度怎么办，以下是我总结的一些函数： /* * 解析matrix矩阵，0°-360°，返回旋转角度 * 当a=b||-a=b,0<=
css3 transform及原生js实现鼠标拖动3D立方体旋转
12-13
在本文中，我们将探讨如何利用CSS3的`transform`属性以及原生JavaScript来实现一个交互式的3D立方体拖动旋转效果。这个效果基于用户的鼠标操作，通过监听鼠标按下、移动和抬起事件，动态更新立方体的旋转角度，进而...
CSS3 transform实现图片旋转木马3D
10-20
通过结合CSS3的`transform`属性、`transition`属性以及JavaScript的动态控制，我们可以构建出一个生动有趣的3D图片旋转木马效果。在提供的`rotate.html`和`rotat1.html`文件中，你应该能找到实际的代码示例，帮助你...
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
10-22
- 获取鼠标的实时坐标，然后计算出鼠标的移动距离，这个距离通过JavaScript动态改变立方体的transform属性，从而实现旋转效果。 知识点四：3D空间中立方体各面的定位 在本文中，一个立方体被切分成六个面，每个面都...
通过JS代码旋转div
未来之歌
05-16 2万+
通常在CSS中，旋转一个div可由下面几行代码实现，旋转7度： div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); ...
技术学派：使用JS transform属性，实现旋转木马效果
weixin_42686892的博客
03-02 2283
搭建舞台 ... <style type="text/css"> .main{ width: 900px; min-height: 100px; margin:0 auto; padding: 100px 50px; background-color: #f0f0f0; box-shadow: inset 0 0 3px rgba(0,0,0,.35); po
js 获取transform值 rotatex rotatey rotatez_Css3,基础代码：transform动画属性介绍
weixin_42532938的博客
12-06 1335
transform:设置元素的旋转跟缩放，倾斜none 定义不进行转换。 测试 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转...
transform旋转
想做大牛的蜗牛
03-09 2569
css3 中有3D效果俯视图，我想写一个图片旋转的效果，五个图片组成五边形 如何组成这样的图形 角度：算出每个图片的旋转角度，使用 .child{ transform: rotateY(0deg) translateZ(800px); backface-visibility: hidden; } .parent{
立方体html与js特效,css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析
weixin_32723617的博客
06-09 516
css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析发布时间：2021-04-21 14:08:12来源：亿速云阅读：90作者：小新这篇文章将为大家详细讲解有关css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。js的作用是什么1、能够嵌入动态文本于HTML页面。2、对浏览...
原生js获取元素transform的scale和rotate
qq_37899792的博客
08-30 3477
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> #divTransform { margin: 30px; width: 200px; height: 100px; background-color: ye.
Js新手问题: transform: rotate(N deg) 每次只旋转一次的问题
chiyongfu2524的博客
03-31 2688
突然,在想很多东西都在手机上,万一手机丢了怎么很多信息不就危险了吗？生活是比较懒的加密的，为了安全起见,以后可以备份一个手机,或搞个更安全的加密机制。[这些话,不是重点,请忽略] setInterval(function(){ id.style.transform="rotate(45de...
原生JS如何动态获取和设置transform
Allen-Ye博客
01-19 9130
在日常开发中，会遇到去改变transform的属性，看下面的例子如何获取和设置 使用js取值 let tabulW = document.querySelector('.tabul') /* 下面是DOM需要获取的DOM元素*/ let transX = document.defaultView.getComputedStyle(tabulW, null).transform 会返回一个字符串 比如我这里是设置了translateX -300px // 获取的字符串中就会包含 "matrix(1
Js控制div的旋转和暂停
ahty的专栏
07-27 9285
Js控制div的旋转和暂停需要用到 setInterval以及clearInterval 我的代码如下： html> html lang="en"> head> meta charset="UTF-8"> title>title> style> .cont{ margin: 100px auto;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值