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