회전 효과를 얻기 위한 js 및 css3

이 글에서는 회전 효과를 얻기 위해 js+css3를 사용하는 방법을 주로 소개합니다. 특정 참조 값이 있으니 함께 살펴보겠습니다

이전 기사에서는 CSS3를 사용하여 회전을 생성하는 효과를 얻었습니다. 이제 이를 구현하기 위해 CSS3와 결합된 다른 방법을 사용하겠습니다. .이제 사진을 보여드리면서 효과를 보여드리겠습니다

다음으로 CSS 코드를 먼저 넣어보겠습니다. 코드는 매우 간단합니다.

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

위 코드는 누구나 이해할 수 있으므로 생략하겠습니다. 이제 제가 집중하고 있는 부분은 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];
 }
 }
}

여기서 상대적인 어려움에 대해 이야기하겠습니다:

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());newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());

这一句代码其实就是把首字母转成是大写的

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

이 코드는 실제로 첫 글자를 대문자로 변환합니다

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

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

위 내용은 이 글의 전체 내용입니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요! 관련 권장 사항:

JS 및 Canves를 사용하여 클릭 버튼에 물 파급 효과를 적용

jQuery 및 CSS3 접이식 카드 드롭다운 목록 상자를 사용하여 효과 적용

🎜🎜🎜🎜

위 내용은 회전 효과를 얻기 위한 js 및 css3의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!