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

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

默认情况

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

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

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

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

元素旋转

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

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

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

元素缩放

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

.box{transform:scale(0.5);}

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

原点在元素的边缘

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

transform-origin:0% 0%;

元素旋转

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

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

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

元素缩放

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

.box{transform:scale(0.5);}

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

原点在元素的外面

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

transform-origin:-100% -100%;

元素旋转

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

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

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

元素缩放

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

.box{transform:scale(0.5);}

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

总结

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