CSS新手教程：transform-origin属性详解 实操使用效果示例

---

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

默认情况

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

.box{

    width:300px;

    height:300px;

    background:red;

}

Alt text

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

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

元素旋转

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

.box{

    transform:rotate(45deg);

}

Alt text

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

元素缩放

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

.box{

    transform:scale(0.5);

}

Alt text

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

原点在元素的边缘

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

transform-origin:0% 0%;

元素旋转

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

.box{

    transform:rotate(45deg);

}

Alt text

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

多谢各位观看，我是万章。

每个属性都像一盘大餐，当我们能够深挖进去时便能够享受其无边的美味。如果有同学想要和万章老师一起享受这份饕餮大餐, 可以加我的QQ:647789540，我们一起开饭啦！