直接上代码：
html:
4
246<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p class="a">abcd</p>
<p id="button">button</p>
<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的时候，我点击按钮旋转另一个块,那个块的旋转中心不是在中心。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
因为你的p已经绝对定位了，所以transform-orgin改变的中心并不是相对于元素而是视图，由于p在x,y轴都偏移了100px,因此要把CSS改为如下
来使旋转中心居中即可解决。
transform-origin: 150px 150px;
这样的吧，得把translate的算上
你translateY的时候也是在translateX的基础上进行的变换。你把之前变换的值加上就是了，transform-origin: 150px 150px; 具体的矩阵变换，我要回去看图形学的书去了。。
.a的translate是100；加上#button宽是50，所以大的p中心点应该是在150 150位置上，所以你transfrom origin应该是150 150