首页 前端知识 transform-origin属性详解

transform-origin属性详解

2024-04-15 21:04:23 前端知识 前端哥 565 174 我要收藏

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

2.以顶部旋转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;
        }

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5029.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!