transform变形相对于谁?

最原始有个样式,

然后开始写了这样的变形:

.tooltip-effect-1 .tooltip-content {
    -webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
    transform-origin: center bottom;
}

.tooltip-effect-1 .tooltip-content i {
    transform: scale3d(0,0,1);
}
后来又这样变形:
.tooltip:hover .tooltip-content, .tooltip:hover .tooltip-content i {
    opacity: 1;
    transform: translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}

为什么后来的变形不是相对第一次变形再变回去,而是全部相对于初始清零呢

为什么不是这样的代码?

.tooltip:hover .tooltip-content, .tooltip:hover .tooltip-content i {
    transform: translate3d(0,-10px,0) rotate3d(1,1,1,-45deg)
}