js et css3 pour obtenir un effet de rotation

Cet article présente principalement la méthode js+css3 pour obtenir un effet de rotation. Il a une certaine valeur de référence, examinons-le ensemble

Mon article précédent a obtenu l'effet d'utiliser css3 pour créer une rotation. Maintenant, j'utilise une autre méthode pour y parvenir, c'est-à-dire utiliser js combiné avec. css3 La méthode est implémentée. Maintenant, je vais vous montrer l'effet dans l'image ci-dessous

Ensuite, je vais mettre mon code CSS en premier. 🎜 >

.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;
}

Tout le monde peut comprendre le code ci-dessus, je ne le présenterai donc pas. Ce sur quoi je me concentrerai, c'est la partie code de 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];
 }
 }
}

Je parlerai des difficultés relatives. ici. Jetez un oeil :

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());

Ce code convertit en fait la première lettre en majuscule

<span style="color:#000000;font-family:NSimsun">(</span>{transform:"rotate(10deg)","transform-origin":"0 0"))

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

Ce qui précède est l'intégralité du contenu de cet article.J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

JS et Canves pour obtenir un effet d'ondulation de l'eau en cliquant sur le bouton

jQuery et CSS3 - Déposez une carte pliante -down list Effet de mise en œuvre du cadre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!