Detailed explanation of transform origin attribute

 transform-origin Base point for animating ( Center point ) , Applicable to all block level elements and some inline elements .

        Must cooperate transform Use   By default , The action reference point of the element is the center of the element box

        You can set the value of nine positions ： horizontal direction ：  left    center      right

                                                                    0       50%       100%

                                                vertical direction ：  top    center     bottom

        The default value is ：50% 50% , be relative to center center

        Two ways of writing ,

         eg：

                transform-origin: left; 

                transform-origin:0;

                  

grammar ：

transform-origin: x-axis y-axis z-axis;

Attribute value details

 <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div>

1. The default value is , Rotate at its origin 45deg

       .outer {
            width: 100px;
            height: 100px;
            background-color: #6a5acd8c;
            margin: 200px;
            position: relative;
        }
         /* (1) Default rotation , Red is the base point    The default value is  transform-origin: 50% 50% 0;*/
        .inner {
            transform: rotate(45deg);
            /* transform-origin: 50% 50% 0; */
            width: 100%;
            height: 100%;
            background-color: #6a5acdeb;
        }        
        .outer .inner:nth-child(2){
            width: 5px;
            height: 5px;
            background-color: red;
            transform: none;
            position: absolute;
            top: 50px;
            left: 50px;
        }

２． Rotate at the top 180deg

       .outer {
            width: 100px;
            height: 100px;
            background-color: #6a5acd8c;
            margin: 200px;
            position: relative;
        }  
  
        /* （2） Rotate at the top 180deg */
        .inner {
            transform: rotate(180deg);
            transform-origin: 50% 0;
            width: 100%;
            height: 100%;
            background-color: #6a5acdeb;
        }

        .inner:nth-child(2) {
            width: 5px;
            height: 5px;
            background-color: red;
            transform: none;
            position: absolute;
            top: -2.5px;
            left: 50px;
        }

 

3. Rotate on the right 150deg

 /*   Rotate on the right 150deg  Red is the base point  */
        .inner {
            transform: rotate(150deg);
            transform-origin: 100% 50%;
            width: 100%;
            height: 100%;
            background-color: #6a5acdeb;
        }
        .inner:nth-child(2) {
            width: 5px;
            height: 5px;
            background-color: red;
            transform: none;
            position: absolute;
            top: 47.5px;
            left: 97.5px;
        }

4. Rotate in the upper left corner 20deg Red is the base point

.inner {
            transform: rotate(-20deg);
            transform-origin: 0 0;
            width: 100%;
            height: 100%;
            background-color: #6a5acdeb;
        }
        .inner:nth-child(2) {
            width: 5px;
            height: 5px;
            background-color: red;
            transform: none;
            position: absolute;
            top: -2.5px;
            left: -2.5px;
        }

From the above example, we can see , The offset position represented by the attribute value , Knowing the offset position represented by each attribute value can flexibly make the element rotate according to a certain benchmark .