问一个css 旋转的问题
直接上代码：
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的时候，我点击按钮旋转另一个块,那个块的旋转中心不是在中心。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
因为你的div已经绝对定位了，所以transform-orgin改变的中心并不是相对于元素而是视图，由于div在x,y轴都偏移了100px,因此要把CSS改为如下
来使旋转中心居中即可解决。
transform-origin: 150px 150px;
这样的吧，得把translate的算上
你translateY的时候也是在translateX的基础上进行的变换。你把之前变换的值加上就是了，transform-origin: 150px 150px; 具体的矩阵变换，我要回去看图形学的书去了。。
.a的translate是100；加上#button宽是50，所以大的div中心点应该是在150 150位置上，所以你transfrom origin应该是150 150