javascript - 问一个css 旋转的问题
本文介绍了javascript - 问一个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的时候，我点击按钮旋转另一个块,那个块的旋转中心不是在中心。
解决方案
因为你的div已经绝对定位了，所以transform-orgin改变的中心并不是相对于元素而是视图，由于div在x,y轴都偏移了100px,因此要把CSS改为如下
transform-orgin:150px 150px;来使旋转中心居中即可解决。
这篇关于javascript - 问一个css 旋转的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
