极客观点
项目管理
HarmonyOS
直接上代码：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="a">abcd</div>
<div id="button">button</div>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
</body>
</html>css:
.a {
position: absolute;
width: 100px;
height: 100px;
background: red;
transform: rotate(0) translateX(100px) translateY(100px);
transform-origin: 50px 50px;
}
#button {
width: 50px;
height: 50px;
background: yellow;
}javascript:
var i = 10;
$('#button').on('click', function() {
$('.a').css('transform', 'rotate('+ i +'deg) translateX(100px) translateY(100px)');
$('.a').css({
'transform-origin': '50px 50px',
'-webkit-transform-origin': '50px 50px'
});
i++;
});别问我为什么定位用translateX,translateY,我也不想的，项目经理搞了一个软件叫hype里面的可视化定位就是translate，我这里是举个例子，为什么我定位用translate的时候，我点击按钮旋转另一个块,那个块的旋转中心不是在中心。
因为你的div已经绝对定位了，所以transform-orgin改变的中心并不是相对于元素而是视图，由于div在x,y轴都偏移了100px,因此要把CSS改为如下
来使旋转中心居中即可解决。