transform-origin属性详解

 transform-origin用于设置动画的基点(中心点) ， 适用于所有块级元素及某些内联元素。

        必须配合transform使用  默认情况下，元素的动作参考点为元素盒子的中心

       可以设置九个位置的值：水平方向：  left    center      right

                                                                    0       50%       100%

                                               垂直方向：  top    center     bottom

        默认值：50% 50% ，相对于center center

        两种写法 ，

         eg：

                transform-origin: left; 

                transform-origin:0;

                  

语法：

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

属性值详解

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

1.默认值,以自身原点旋转45deg

       .outer {
            width: 100px;
            height: 100px;
            background-color: #6a5acd8c;
            margin: 200px;
            position: relative;
        }
         /* (1)默认值旋转，红色为基点  默认值为 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;
        }

２．以顶部旋转180deg

       .outer {
            width: 100px;
            height: 100px;
            background-color: #6a5acd8c;
            margin: 200px;
            position: relative;
        }  
  
        /* （2）以顶部旋转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.以右部旋转150deg

 /*  以右部旋转150deg 红色为基点 */
        .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.左上角旋转20deg 红色为基点

.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;
        }

从以上例子中可以看出，属性值的所代表的偏移位置，了解各属性值所代表的偏移位置后可以很灵活得使元素按照某一基准点进行旋转。