关于css tranlate的问题

Question

根据css揭秘中沿环形路径平移的动画中

@keyframes spin {
    from {
        transform: rotate(0turn)
                   translateY(-150px) translateY(50%)
                   rotate(1turn)
    }
    to {
        transform: rotate(1turn)
                   translateY(-150px) translateY(50%)
                   rotate(0turn);
    }
}


.avatar {
    animation: spin 3s infinite linear;
}

/* Anything below this is just styling */

.avatar {
    display: block;
    width: 50px;
    margin: calc(50% - 25px) auto 0;
    border-radius: 50%;
    overflow: hidden;
}

.path {
    width: 300px; height: 300px;
    padding:20px;
    margin: 100px auto;
    border-radius: 50%;
    background: #fb3;
}

为什么translateY(-150px) translate(50%)之后里面的头像的圆心没在大圆的边界上(不算padding那20px)，还有就是要怎么看这两个translateY