js and css3 to achieve rotation effect

This article mainly introduces the method of achieving rotation effect in js css3. It has a certain reference value, let’s take a look at it together

My previous article achieved the effect of using css3 to create rotation. Now, I use another method to achieve it. That is to use js combined with css3 The method is implemented. Now I will show you the effect by showing the picture.

Now I will put my css code first, the code is very simple:

.one{
width:200px;
height: 200px;
border:1px solid #adadad;
transition:all 0.1s;
border-radius:50%;
background:url(images/1.jpg) no-repeat center center;
background-size:cover;
margin:50px auto;
}

Everyone can understand the above code, so I won’t introduce it. What I focus on is the code part of js.

window.onload=function(){
 var p=document.getElementsByClassName("one")[0];
 console.log(p);
 setCss3(p,{transform:"rotate(10deg)","transform-origin":"50% 50%"})
 var angel=0;
 setInterval(function(){
 angel+=8;
 setCss3(p,{transform:"rotate("+angel+"deg)","transform-origin":"0 0"})
 },30)
 function setCss3(obj,objAttr){
 //循环属性对象
 for(var i in objAttr){
 var newi=i;
 //判断是否存在transform-origin这样格式的属性
 if(newi.indexOf("-")>0){
 var num=newi.indexOf("-");
 newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
 }
 //考虑到css3的兼容性问题,所以这些属性都必须加前缀才行
 obj.style[newi]=objAttr[i];
 newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
 obj.style[newi]=objAttr[i];
 obj.style["webkit"+newi]=objAttr[i];
 obj.style["moz"+newi]=objAttr[i];
 obj.style["o"+newi]=objAttr[i];
 obj.style["ms"+newi]=objAttr[i];
 }
 }
}

I will talk about the relative difficulties here:

if(newi.indexOf("-")>0){
  var num=newi.indexOf("-");
  newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());
 }

newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());

This code actually Just convert the first letter to uppercase

({transform:"rotate(10deg)","transform-origin":"0 0"))

因为在js中修改样式的时候,是不存在-webkit-transformz这样的格式的,两个单词之间的"-"是必须要省略掉的,换成第二个单词的字母为大写.所以主要就是把这个处理好了之后久ok了
注意点:1.因为如果不添加css3的过渡属性的话,旋转的时候是会有种卡顿效果的,就是旋转的时候不顺畅,所以我这里添加了transition属性,让他转动起来的时候看起来顺畅的.
　　　 2.transform-origin的值如果为0 0的时候,是绕着原点旋转的,50% 50%的时候就是绕着中心点旋转的.不过默认的时候就是绕着中心点旋转的

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

JS and Canves realize the water ripple effect of click buttons

jQuery and CSS3 folding card drop-down list Frame implementation effect

The above is the detailed content of js and css3 to achieve rotation effect. For more information, please follow other related articles on the PHP Chinese website!