最近遇到一个需求，是以前做PHP的同事问我的问题
下面是他在百度发的问题截图
根据上面的截图，我稍微梳理了一下
问题：现在有个div，旋转45度后，这个div的宽度会动态改变，并且要向右上方偏移
需求：现在想要该div旋转45度后，宽度动态改变的同时，不要向右上方偏移
注：这个动态添加的宽度理论上不限制，一般限制在0-1000px
然后我在处于蒙蔽的状态下思考，寻找解决方法，最后，找到了css3的transform-origin 属性
这个属性的意思是：让你更改一个元素变形的原点。我的理解是，可以让你以某个点为圆心旋转
虽然这个属性并不能完全解决向右上方偏移的问题，但经过测试，如果在0-1000px的范围里，偏移量是很小的
demo
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.son {
position: fixed;
width: 100px;
height: 150px;
margin-top: 100px;
border: 5px solid red;
transform: rotate(45deg);
transform-origin: 6% 90%;
}
</style>
</head> <body> <div class="son"></div> </body> </html>
注：运行该demo，在谷歌开发者工具中手动调整div宽度，即可看到0-1000px时，偏移的距离
补充：据同事讲，他是在做一个标注工具，能够圈图片上一些东西识别，
我也没做过，个人觉得该需求不太合理，技术实现上也有一定难度，
如果有小伙伴有好的方法，欢迎留言解惑