更改变换原点

基本上来说变换都是围绕着原点来进行的；而这个原点默认情况下是元素的中心。
我们可以通过属性transform-origin来更改转换的原点；如下

.origin{
        width: 200px;
        height: 200px;
        border: 1px solid green;
        transform: rotate(20deg);
        transform-origin: center bottom;
        //ransform-origin: 20px bottom; 
        //transform-origin: 30% 20%;
    }

transform-origin属性默认为transform-origin: center center或者transform-origin: 50% 50%。
变换原点：就是在二维中取X/Y轴上的两个值，以确定原点的位置。

我们可以通过更改其percentage/百分比或者center、left、top、bottom、right亦或者lengths来更改原点。
但最准确的方法还是使用关键字。