Js + css3 achieves rotation, and jscss3 achieves Rotation

Js + css3 achieves rotation, and jscss3 achieves Rotation

In the previous article, I used css3 to create a rotating image. Now I want to use another method. it is implemented by combining JavaScript with css3. let me show you the effect first.

Next, I first put my css Code. 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;}

I will not introduce the above Code. I will focus on the js Code section.

Window. onload = function () {var div = document. getElementsByClassName ("one") [0]; console. log (div); setCss3 (div, {transform: "rotate (10deg)", "transform-origin": "50% 50%"}) var angel = 0; setInterval (function () {angel + = 8; setCss3 (div, {transform: "rotate (" + angel + "deg)", "transform-origin ": "0 0"})}, 30) function setCss3 (obj, objAttr) {// The cyclic property object for (var I in objAttr) {var newi = I; // determine whether the transform-origin attribute is in the format of if (newi. indexOf ("-")> 0) {var num = newi. indexOf ("-"); newi = newi. replace (newi. substr (num, 2), newi. substr (num + 1, 1 ). toUpperCase ();} // considering the compatibility of css3, these attributes must be prefixed before 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] ;}}

Here I will explain the relative difficulties:

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 converts the first letter into uppercase letters.

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

When you modify a style in js, the format-webkit-transformz does not exist. The "-" between two words must be omitted, replace the second word with uppercase letters. therefore, it takes a long time to complete this operation. <br> <span style = "color: # ff0000"> Note: 1. if the transition attribute of css3 is not added, the rotation will be slow, that is, the rotation will not be smooth, so I added the transition attribute here, it looks smooth when it turns. <br> 2. if the value of transform-origin is 0 0, it is rotated around the origin, and 50% 50% is rotated around the central point. however, by default, it is the rotation around the center <br> </span>

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!