/* 中心点，上下左右的中点(默认是center) */
transform-origin: center; 
transform-origin: 50%;
/* 左上角，其他四个角类似 */
transform-origin: top left; 
/* 上面中间 */
transform-origin: top center;
/* 其实还有个z轴，是第三个参数 */
transform-origin: 0 50% 10px;
利用关键帧可以实现动画
.rect{
    transform-box: fill-box;
    transform-origin: 0 0;
    animation: mymov 1s forwards;  /*animation 指定动画名和持续时间，结束后保持*/ 
@keyframes mymov{ /*动画通过关键帧来声明，可以直接声明100%的样式，0%默认对应的就是静态css效果*/
    100%{
        /* 这里可以指定任何css样式，例如width，backgroud等 */
        transform: rotate(45deg); 
animation第一个参数指定动画，第二个指定时间，但是还有更多的参数。
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
timing-function: 默认是ease低速开始加速，然后减速。还支持linear、ease-in、ease-out、ease-in-out等
delay: 延时执行，如1s，默认是0s，注意不是0，必须是0s，后面说为啥。
iteration-count: 动画重复次数，infinity是无限循环
direction: 动画方向normal正向，reverse反向，alternate正向然后反向回来，如果设置了次数一个来回算两次。
animation-fill-mode: forwards使动画结束后样式保留，而不是复原。backwards复原。