My javascript is:
$(function() {
var $elie = $(".circle");
rotate(0);
function rotate(degree) {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
rotate(++degree);
},5);
}
});
Here is the demo: http://fakeheal.eu/demo/
How do I rotate the div around another center point?
You'd use transform-origin
for that :
$elie.css("-webkit-transform-origin", "50% 100%" );
or
transform-origin: 100% 40%;
-ms-transform-origin: 100% 40%; /* IE 9 */
-webkit-transform-origin: 100% 40%; /* Safari and Chrome */
-moz-transform-origin: 100% 40%; /* Firefox */
-o-transform-origin: 100% 40%; /* Opera */
EDIT:
To rotate around the center of the .circle
element, it first needs a height, otherwise there is no center. Then you could use percentages, or the much handier center
property, like so:
transform-origin:center center;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.