最近遇到一个需求,是以前做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时,偏移的距离

 

  补充:据同事讲,他是在做一个标注工具,能够圈图片上一些东西识别,

     我也没做过,个人觉得该需求不太合理,技术实现上也有一定难度,

     如果有小伙伴有好的方法,欢迎留言解惑

 

有需要的朋友可以领取支付宝到店红包,能省一点是一点