css3之transform-origin属性详解图文笔记

痛定思痛。 2023-02-25 07:20 47阅读 0赞

![format_png][]

--------------------

相信熟悉CSS3动画的小伙伴们对这个属性应该不陌生了,这个属性能够为我们的动画添加更多有趣的效果, 但同时其不够直观的特点也给大家带来一定学习上的困难. 今天我们就来剖析一下这个属性。

**默认情况**

假设我们当前页面上生成了一个小div元素设置好了宽高和背景色属性

.box{
    
    width:300px;
    
    height:300px;
    
    background:red;
    
    }

![format_png 1][]

每个元素都有一个默认的transform-origin属性，其位置正好位于元素的水平中心和垂直中心线的交叉点

我们用旋转、缩放这两个最常用的动画来认识一下默认情况的显示样式

**元素旋转**

此时我们给该元素设置一个旋转角度

.box{
    
    transform:rotate(45deg);
    
    }

![format_png 2][]

此时整个元素中心点保持不变，所有的区域皆围绕的元素的中心进行旋转犹如一个矩形风车一般。

![format_png 3][]

**元素缩放**

此时我们给元素设置一个缩放因子scale（0.5）

.box{
    
    transform:scale(0.5);
    
    }

![format_png 4][]

此时矩形的所有区域全部都往中心点坍缩，若是分解来看，矩形横向缩放是左右两边向水平中心线缩放，矩形纵向缩放是上下两边向垂直中心线缩放，若是将两者的缩放动作结合来看就是元素向中心点缩放。

![format_png 5][]

**原点在元素的边缘**

我们将元素的变化圆点放在元素的左上角以此来辨别不同效果

transform-origin:0% 0%;

![format_png 6][]

####     ####

**元素旋转**

此时我们给该元素设置一个旋转角度

.box{
    
    transform:rotate(45deg);
    
    }

![format_png 7][]

此时整个div元素犹如左上角被一根钉子钉到墙上，然后再自然垂直落下。看上去就是一个意见簿一般

![format_png 8][]

**元素缩放**

此时我们给元素设置一个缩放因子scale（0.5）

.box{
    
    transform:scale(0.5);
    
    }

![format_png 9][]

此时矩形的所有区域全部都往左上角坍缩，若是分解来看，矩形横向缩放是右边区域向左边区域坍缩，矩形纵向缩放是下边向上边缩放，若是将两者的缩放动作结合来看就是整个元素集中向左上角缩放

**原点在元素的外面**

我们将元素的变化圆点放在元素的左上角以此来辨别不同效果

**transform-origin:-100% -100%;**

#### **元素旋转**  ####

此时我们给该元素设置一个旋转角度

.box{
    
    transform:rotate(45deg);
    
    }

![format_png 10][]

此时整个div元素犹如左上角被一根绳子拴着，绳子的另一端钉在墙上，然后再自然垂直落下，看上去犹如一个秋千。

![format_png 11][]

####     ####

#### **元素缩放** ####

此时我们给元素设置一个缩放因子scale（0.5）

.box{
    
    transform:scale(0.5);
    
    }

![format_png 12][]

此时矩形的缩放可看做两个过程， 一个是元素以元素自身左上角为中心缩小，一个是div元素的左上角移到css设置好的中心点，结合来看就像是元素一边缩一边移动

![format_png 13][]

###     ###

总结

transform-origin这个属性若是应用恰当则可以实现相当复杂的动画特效，但是为了能够随心所欲的掌握该属性，我们还需要对其进行更深入的了解。

![format_png 14][]

[format_png]: /images/20230209/4d919826282c4e42be8d05320579162b.png
[format_png 1]: /images/20230209/fdde1f8a19f141c88a860223966d60bb.png
[format_png 2]: /images/20230209/2ce8bb7abe76415e9d53ec8bdd683bd3.png
[format_png 3]: /images/20230209/27c3ce8e92514f0e8f561bfacd2c6b81.png
[format_png 4]: /images/20230209/c3cec18265594637b9a6fc05fbf2ea57.png
[format_png 5]: /images/20230209/913408fdc41645bcba151bca51f9e362.png
[format_png 6]: /images/20230209/93e8705ea9324ff8a35b4e9d03da9886.png
[format_png 7]: /images/20230209/cf147232b9514a9a934a04db44840830.png
[format_png 8]: /images/20230209/fd943dbe95b1491bb08f9607bec65f7f.png
[format_png 9]: /images/20230209/20416b9a01784b63a136108977d8d746.png
[format_png 10]: /images/20230209/77b4520d318a4ef1964a45a33e30377b.png
[format_png 11]: /images/20230209/817a78c19e794a178d6c8af3d1abb492.png
[format_png 12]: /images/20230209/780da6d37e3d4d20a9e59ae0bad95d6d.png
[format_png 13]: /images/20230209/773eef8509d44d6683a86af76c03b13f.png
[format_png 14]: /images/20230209/27fd2ab702844de4bf11feb64fea0d97.png