The transform-origin of CSS learning every day

In the previous article, we learned how to use transform to make 2D transformations. The transform-origin to be told today is related to this deformation.

Origin translates the meaning of origin and beginning. The Transform-origin implication is the beginning of the deformation. Yes, its role is to set the starting point of the deformation.

Transform-orgin:x-axis Y-axis Z-axis;

The translation comes from:

transform-origin:x Axis y axis Z axis;

X axis: Left, center, right, percent, length

Y-axis: Top, center, bottom, percent, length

Z Axis: Length

The general 2D variant does not use the z-axis parameter.

Now let's practice it and make it easier to understand.

To rotate 20 degrees clockwise, for example:

1. When Transform-orgin is not set, the beginning of deformation is the center point by default:

. trans1{Z-index:-1;                Position:absolute;                top:100px;                left:100px;                width:100px;                height:100px;                    border:1px solid red; Background-Color:blue;                        Color:yellow; }. trans2{Z-index:1;                Position:absolute;                top:100px;                left:100px;                width:100px;                height:100px;                    border:1px solid red; Background-Color:black;                                            color:red;   transform:rotate (10DEG);              }

Results:

2. Set the starting point of the deformation to the lower right corner of the box, i.e. Transform-origin:right bottom;

. trans1{Z-index:-1;                Position:absolute;                top:100px;                left:100px;                width:100px;                height:100px;                    border:1px solid red; Background-Color:blue;                        Color:yellow; }. trans2{Z-index:1;                Position:absolute;                top:100px;                left:100px;                width:100px;                height:100px;                    border:1px solid red; Background-Color:black;                                           color:red;                        transform:rotate (10DEG); Transform - Origin:right Bottom;                         }

Results:

The transform-origin of CSS learning every day