旋转div如何设置要旋转的点? [英] Rotating a div how to set around which point to rotate?
本文介绍了旋转div如何设置要旋转的点?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的JavaScript是:
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);
}
});
如何围绕另一个中心点旋转div?
How do I rotate the div around another center point?
这里是演示:
$(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);
}
});
.circle {
width: 200px;
height: 200px;
background: green;
border-radius: 50%;
border: 4px dashed black;
margin: calc(50vh - 100px) auto 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="circle">
</div>
推荐答案
您将为此使用transform-origin
:
$elie.css("-webkit-transform-origin", "50% 100%" );
或
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 */
要围绕.circle
元素的中心旋转,它首先需要一个高度,否则就没有中心.然后,您可以使用百分比或更方便使用的center
属性,如下所示:
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;
这篇关于旋转div如何设置要旋转的点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文