Transform origin of CSS

Time:2020-11-3

As we all know, the page pixels rendered by the browser are physical pixels, while the CSS pixels are used in the front-end development process. Therefore, in the actual development process, we often need to consider the problem of screen resolution, for different resolutions of the screen for the same CSS pixel to do the corresponding scaling. The common ones are about 1px’s dividing lines, borders, etc.

The most common example is a vertical divider with a width of 1px

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

Media query: if the screen has a high screen, you need to zoom:

{
    transform: scale(0.5);
    Transform origin: left top; // do some position adjustment after zooming
}

abouttransform-origin:left top;In some special cases, the vertical line disappears. It usually appears when the width is odd, and it is not necessary to appear occasionally. It may be related to the browser rendering. The specific reason is still some mystery.

Solution:
transform-origin:right top;
Why can such a change solve this problem? I haven’t figured it out yet. Left and right are essentially the same, which is to scale the center point of an element to the left or right. To put it bluntly, it’s just a change in position. Elements should not disappear.

If you find out the reason, please add it.

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]