关于前端:css踩坑之transformorigin

家喻户晓，咱们看到浏览器渲染进去的页面像素是物理像素，而前端开发过程中所应用的是 css 像素。因而咱们在理论开发过程中常常须要思考到屏幕分辨率的问题，针对的不同分辨率的屏幕对于雷同的 css 像素做相应的缩放解决。常见的就是对于 1px 的分割线个边框等。

最常见的例子，如下一个 1px 宽度的一个竖分割线

div {
    position: realative;
    &::after {
        content: '';
        width: 1px;
        height: 100px;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

屏幕自适应准则（media-query），若是高分屏的屏幕，则须要缩放：

{transform: scale(0.5);
    transform-origin: left top; // 缩放之后做一些地位调整
}

对于 transform-origin：left top; 在一些非凡状况下回呈现竖线隐没，通常是 width 为奇数的时候才会呈现，且偶现非必现，可能跟浏览器渲染无关，具体起因还有些迷。

解决方案：
transform-origin：right top;
为什么这么改变就能够解决这个问题我临时还没有想明确，left 和 right 实质上是差不多的，是将元素的中心点依照左或者右缩放。说白了只是地位变动，元素不应该隐没。

若查到起因再来补充。