transform-origin属性详解

本文介绍: transform–origin 用于设置动画的基点(中心点) ，适用于所有块级元素及某些内联元素。必须配合transform 使用默认情况下，元素的动作参考点为元素盒子的中心可以设置九个位置的值：水平方向： left center right 0 50% 100% ……

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

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

可以设置九个位置的值：水平方向： left cent e r r i g ht

0 50% 100%

垂直方向： top cent e r bottom

默认值：50% 50% ，相对于cent e r center

两种写法，

eg：

transform–origin: left;

tr ans form–origin:0;

语法：

t r ans form–origin: x–axis y–axis z-axis;

属性值详解

 &lt;div class="outer"&gt;
        <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;
        }