transform-origin属性详解

鹿蹊zz

已于 2022-06-28 17:16:22 修改

阅读量4w

点赞数 31

分类专栏： CSS 文章标签： css3 学习

于 2022-05-27 16:49:15 首次发布

本文链接：https://blog.csdn.net/m0_46461853/article/details/125005924

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了 CSS 中 transform-origin 属性的用法及其在元素旋转动画中的作用。通过实例展示了如何设置不同的基点来实现精确的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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