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. 🎜 >
1 2 3 4 5 6 7 8 9 10 | .one{
width : 200px ;
height : 200px ;
border : 1px solid #adadad ;
transition: all 0.1 s;
border-radius: 50% ;
background : url (images/ 1 .jpg) no-repeat center center ;
background- size :cover;
margin : 50px auto ;
}
|
Copier après la connexion
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | 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;
if (newi.indexOf( "-" )>0){
var num=newi.indexOf( "-" );
newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
}
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];
}
}
}
|
Copier après la connexion
Je parlerai des difficultés relatives. ici. Jetez un oeil :
1 2 3 4 | if (newi.indexOf( "-" )>0){
var num=newi.indexOf( "-" );
newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());
}
|
Copier après la connexion
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"))
1 | 因为在js中修改样式的时候,是不存在-webkit-transformz这样的格式的,两个单词之间的 "-" 是必须要省略掉的,换成第二个单词的字母为大写.所以主要就是把这个处理好了之后久ok了<br><span style= "color: #ff0000" >注意点:1.因为如果不添加css3的过渡属性的话,旋转的时候是会有种卡顿效果的,就是旋转的时候不顺畅,所以我这里添加了transition属性,让他转动起来的时候看起来顺畅的.<br> 2.transform-origin的值如果为0 0的时候,是绕着原点旋转的,50% 50%的时候就是绕着中心点旋转的.不过默认的时候就是绕着中心点旋转的<br></span>
|
Copier après la connexion
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!