我们经常使用 transform-origin 来对元素的原点进行定位，再使用transform的一些CSS属性就能轻而易举的达到我们对动画的需求。
但是依然有局限性，遇到这样一个需求，给定一个DIV宽高，然后我们想对他进行高度或宽度的改变并带有动画
1.png
然后我们对他进行宽度或高度的改变，没问题，设置宽高后如图：
2.png
一切都很正常，但是我们换一个需求呢，我们要求改变高度，
但是需要蓝色盒子高度向上延伸到红色边框处，
下面依然要求和黑色框有一段间隙，
这个时候如果我们使用transform-origin来进行动画原点的设置是不起任何作用，
至于原因就跟我所说的是对动画原点进行设置，是对动画的原点，而我们设置的宽高并不是
使用动画属性去进行改变，所以设置transform-origin并不会起任何作用，当然transform
中也有改变DIV大小的属性如 scale，但是设置这个属性会发生一些我们不愿意看到的现象
接下来介绍我们的主角---position，这个属性是我们经常在编写前端页面要使用的一个
元素定位方式，它的定位方式有很多，这里就不一一赘述了。
我们给定中间蓝色盒子position:absolute,然后对它进行定位设置,直接设置bottom
.blue{
position: absolute;
width: 800px;
height: 300px;
background-color: aqua;
bottom: 120px;
}
这个时候再进行高度的设置，我们发现盒子是往上延伸的
3.png
我们再来改改其他属性
/*改变宽盒子宽度会向左延伸，改变盒子高度会向上延伸*/
.blue{
position: absolute;
width: 800px;
height: 300px;
background-color: aqua;
bottom: 120px;
right:0;
}
4.png
我们也可以将变化的原点设置到盒子的中心，这样改变宽或高时，会同时增加两边的高度
/*改变宽盒子宽度会向左延伸，改变盒子高度会向上延伸*/
.blue{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 800px;
height: 300px;
background-color: aqua;
}
5.png
当然如果需要设置的原点比较特殊，这种方法就不适用了，毕竟特殊情况特殊分析
