晨曦的阳光淌进窗户，给你送出我的祝福，打开手机查看，温馨，一点点爬上你的笑脸，你是快乐的，我就是幸福的，早安！
前言
最近做的一个烟花动画，就是烟花散开的动画，在动画的实现过程中，主要在烟花旋转过程中卡住了，后来发现主要对transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。
transform-origin作用
这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;，表示该容器的旋转中心变为以盒模型左上角为原点，X和Y轴距离50px为原点进行旋转。
时钟时针的绘制
中间那个竖条为我们最初始设置的，后面的均基于此进行旋转
<div class="clock">
<div class="hour"></div>
<div class="hour"></div>
<div class="hour"></div>
<div class="hour"></div>
<div class="hour"></div>
</div>
从下面的CSS代码可以看出，我们设置了旋转中心为第一个竖线的(3,105)px为原点进行旋转，这里的距离为距离盒模型左侧的值，理解这一点，就可以写出其他的时针了，然后分别旋转即可得到时针。由于不理解这里的取值时相对于哪个位置进行计算的，因而踩了不少的坑。
CSS
.hour {
position: absolute;
left: 105px;
width: 6px;
height: 50px;
background-color: #000;
border-radius:6px;
-webkit-transform-origin:3px 105px;
transform-origin:3px 105px;
}
.hour:nth-child(2) {
transform:rotate(45deg);
}
.hour:nth-child(3) {
transform:rotate(90deg);
}
.hour:nth-child(4) {
transform:rotate(-45deg);
}
.hour:nth-child(5) {
transform:rotate(-90deg);
}
参考
MDN
到此这篇关于CSS transform-origin属性的理解就介绍到这了。这个世界上从来没有一蹴而就的成功，如果没有踏实的努力，没有点滴的积累，再好的运气降落到你头上时，你也没有接住它的实力。早安！与您共勉，人生需要一步一个脚印！更多相关CSS transform-origin属性的理解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
