js und css3, um einen Rotationseffekt zu erzielen

In diesem Artikel wird hauptsächlich die Methode von js + css3 vorgestellt, um den Rotationseffekt zu erzielen. Es hat einen bestimmten Referenzwert, schauen wir es uns gemeinsam an

Mein vorheriger Artikel hat den Effekt der Verwendung von CSS3 zum Erstellen einer Rotation erreicht. Jetzt verwende ich eine andere Methode, um dies zu erreichen css3 Die Methode ist implementiert.

Als nächstes füge ich meinen CSS-Code hinzu:

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

Jeder kann den obigen Code verstehen, daher werde ich ihn nicht vorstellen, ich konzentriere mich auf den Codeteil von 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];
 }
 }
}

Ich werde hier über die relativen Schwierigkeiten sprechen:

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

Dieser Code wandelt tatsächlich den ersten Buchstaben in Großbuchstaben um

<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>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

JS und Canves, um einen Wasserwelleneffekt beim Klicken auf die Schaltfläche zu erzielen

jQuery und CSS3-Faltkarten-Drop -Down-Liste Frame-Implementierungseffekt

Das obige ist der detaillierte Inhalt vonjs und css3, um einen Rotationseffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!